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中exports与module.exports的区别详细介绍
Jan 14 NodeJs
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
Sep 26 NodeJs
Nodejs全栈框架StrongLoop推荐
Nov 09 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 NodeJs
详解Nodejs的timers模块
Dec 22 NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 NodeJs
进阶之初探nodeJS
Jan 24 NodeJs
用nodeJS搭建本地文件服务器的几种方法小结
Mar 16 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
NodeJS如何实现同步的方法示例
Aug 24 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php并发加锁示例
2016/10/17 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python求质数的3种方法
2018/09/28 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python绘制封闭多边形教程
2020/02/18 Python
行政经理的岗位职责
2013/11/23 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
付款证明模板
2015/06/19 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记