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数据库示例
Dec 20 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
NodeJs的优势和适合开发的程序
Aug 14 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 NodeJs
进阶之初探nodeJS
Jan 24 NodeJs
深入解析nodejs HTTP服务
Jul 25 NodeJs
nodejs body-parser 解析post数据实例
Jul 26 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
nodejs中函数的调用实例详解
Oct 31 NodeJs
nodejs开发一个最简单的web服务器实例讲解
Jan 02 NodeJs
NodeJs内存占用过高的排查实战记录
May 10 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
简单实现jQuery弹幕效果
2017/05/06 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
分析javascript原型及原型链
2018/03/18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
python模仿网页版微信发送消息功能
2018/02/24 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python3 xpath和requests应用详解
2020/03/06 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
个人三严三实对照检查材料
2014/09/25 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
材料员岗位职责范本
2015/04/11 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书