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的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
Nodejs Post请求报socket hang up错误的解决办法
Sep 25 NodeJs
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
Nodejs学习笔记之测试驱动
Apr 16 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
NodeJS基础API搭建服务器详细过程记录
Apr 01 NodeJs
Nodejs回调加超时限制两种实现方法
Jun 09 NodeJs
nodejs密码加密中生成随机数的实例代码
Jul 17 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 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 设计模式之 工厂模式
2008/12/19 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP7常量数组用法分析
2016/09/26 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
前端微信支付js代码
2016/07/25 Javascript
js变量提升深入理解
2016/09/16 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python实现输入数字的连续加减方法
2018/06/22 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Pycharm安装python库的方法
2020/11/24 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
运动会通讯稿200字
2014/02/16 职场文书
学期评语大全
2014/04/30 职场文书
美术学专业求职信
2014/07/23 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
React forwardRef的使用方法及注意点
2021/06/13 Javascript
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL