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 17 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
nodejs入门教程六:express模块用法示例
Apr 24 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
nodejs6下使用koa2框架实例
May 18 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
用Electron写个带界面的nodejs爬虫的实现方法
Jan 29 NodeJs
Nodejs 识别图片类型的方法
Aug 15 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 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
Web开发之JavaScript
2012/03/29 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
BootStrapValidator初使用教程详解
2017/02/10 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Python ZipFile模块详解
2013/11/01 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python的变量与赋值详细分析
2017/11/08 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
使用python实现飞机大战游戏
2020/03/23 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
会计电算化毕业生自荐信
2014/03/03 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
出生证明格式
2015/06/15 职场文书
聘任通知书
2015/09/21 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫