Jquery通过ajax请求NodeJS返回json数据实例


Posted in NodeJs onNovember 08, 2016

最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的。为什么用这个组合呢?

1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便。

2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据。

3.通信数据格式灵活,可以是xml、json、binary等,数据适合任何平台。

在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等。所以我就自己配置了一个nodejs的绿色版环境,只能在当前cmd窗口运行nodejs的相关环境;无法架设html服务器,所以就单独在D盘创建一个html文件双击打开使用。

一、node环境就不说了,可以查看以下几篇文章

二、编写node执行的脚本,脚本文件app.js如下:

var http = require("http");
var fs = require("fs");

var str='{"id":"123",name:"jack",arg:11111}';

function onRequest(request, response){
 console.log("Request received.");
 response.writeHead(200,{"Content-Type":'text/plain','charset':'utf-8','Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});//可以解决跨域的请求
 //response.writeHead(200,{"Content-Type":'application/json',   'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});
 //response.write("Hello World 8888\n");
 
 str=fs.readFileSync('data.txt');
 response.write(str);
 response.end();
}

http.createServer(onRequest).listen(8888);

console.log("Server has started.port on 8888\n");
console.log("test data: "+str.toString());

其中data.txt和当前app.js文件的放到相同的目录下,data.txt中代码是json格式的数据:{"id":"123",name:"jack",arg:321,remark:"test data"}

通过node app.js的方式运行起来,然后就可以让html通过ajax访问数据了。

另外就是我创建的html文件,文件aaa.html内容如下:

<!DOCTYPE html>
<html>
<head>
 <title>Node JS 实例</title>

<script src="jquery-1.4.4.min.js"></script>

<script>

/*

//可用于检查出错函数的错误内容,一般使用$.get()和$.post()函数就可以了

$.ajax({
 url: "http://127.0.0.1:8888/",
 type: "GET",
 dataType: "binary", //因为是调用nodeJS返回的json数据,所以必须使用binary类型
 error: function(XMLHttpRequest, textStatus, errorThrown){
 var s1=XMLHttpRequest;
 var s2=textStatus;
 var s3=errorThrown;
 alert("error message : "+errorThrown.toString())
 },
 success: function(data){
 $("#feeds").html(data);
 var dataObj=eval('('+data+')');//转换为json对象
 $("#id").html("编号:"+dataObj.id);
 $("#name").html("姓名:"+dataObj.name);
 $("#arg").html("年龄:"+dataObj.arg);
 $("span").html(dataObj.remark);
 
// alert( "Data is : " + data );
 } 

}); 

*/


//$.get("test.cgi", function(data){ alert("Data Loaded: " + data); }); //$.get函数形式结构

$.get("http://127.0.0.1:8888/" + new Date().getTime(), function(data){ 
$("#feeds").html(data);
var dataObj=eval('('+data+')');//转换为json对象
$("#id").html("编号:"+dataObj.id);
$("#name").html("姓名:"+dataObj.name);
$("#arg").html("年龄:"+dataObj.arg);

$("span").html(dataObj.remark);

//alert("Data Loaded: "+new Date().getTime()); 
});




</script>



</head>
<body>
 
 <div id="feeds"></div>
 <div id=id></div>
 <div id=name></div>
 <div id=arg></div>
 
 <span>ddddd</span>

</body>
</html>

文件中都做了相应的注释说明,这里就不再解释了,其中用到的jquery的js文件自己去网上下载一个,也同样放到当前html文件的目录下。

有一点说明下:我下载了jquery的1.8.3版和2.1.4版都会报错,可能对json的支持不是很好,使用1.4.4版可正常运行,其他版本没有测试。

在我本机和内网测试正常显示如下:

{"id":"123",name:"jack",arg:32100, remark:"test data"}
编号:123
姓名:jack
年龄:32100
test data

以上环境都是本人亲自测试,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
Aug 03 NodeJs
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
nodejs简单实现中英文翻译
May 04 NodeJs
nodejs爬虫抓取数据乱码问题总结
Jul 03 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
Feb 04 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
Nodejs中的JWT和Session的使用
Aug 21 NodeJs
Nodejs实现WebSocket代码实例
May 19 NodeJs
NodeJS模块Buffer原理及使用方法解析
Nov 11 NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 #NodeJs
NodeJS使用formidable实现文件上传
Oct 27 #NodeJs
nodejs简单实现操作arduino
Sep 25 #NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 #NodeJs
nodejs微信公众号支付开发
Sep 19 #NodeJs
nodeJs内存泄漏问题详解
Sep 05 #NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 #NodeJs
You might like
PHP新手上路(十三)
2006/10/09 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js select option对象小结
2013/12/20 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python中print函数简单使用总结
2019/08/05 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
大班幼儿评语大全
2014/04/30 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
责任担保书范文
2014/05/21 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年校本培训工作总结
2015/07/24 职场文书