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中自定义事件实例
Jun 20 NodeJs
Nodejs全局安装和本地安装的不同之处
Jul 04 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
NodeJS仿WebApi路由示例
Feb 28 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
nodejs对express中next函数的一些理解
Sep 08 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
nodejs微信开发之接入指南
Mar 17 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
Jun 22 NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
PHP 实现链式操作
2021/03/09 PHP
js tab 选项卡
2009/04/26 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python计算N天之后日期的方法
2015/03/31 Python
简单介绍Python中的struct模块
2015/04/28 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
教师个人查摆剖析材料
2014/10/14 职场文书
骨干教师个人总结
2015/02/11 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
高二英语教学反思
2016/03/03 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js