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使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
轻松创建nodejs服务器(9):实现非阻塞操作
Dec 18 NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 NodeJs
基于html5和nodejs相结合实现websocket即使通讯
Nov 19 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
Nodejs 发送Post请求功能(发短信验证码例子)
Feb 09 NodeJs
Nodejs回调加超时限制两种实现方法
Jun 09 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
nodejs多版本管理总结
Apr 03 NodeJs
关于NodeJS中的循环引用详解
Jul 23 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
详解参数传递四种形式
2015/07/21 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
vue router demo详解
2017/10/13 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
Python中自定义函数的教程
2015/04/27 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python装饰器基础详解
2016/03/09 Python
python迭代器与生成器详解
2016/03/10 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python求前n个阶乘的和实例
2020/04/02 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Django Form常用功能及代码示例
2020/10/13 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
介绍信怎么写
2015/01/30 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书