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极简入门教程(三):进程
Oct 27 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
Aug 16 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
Apr 27 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
nodejs使用Sequelize框架操作数据库的实现
Oct 21 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 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
重置版游戏视频
2020/04/09 魔兽争霸
PHP单例模式详细介绍
2015/07/01 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python集合常见运算案例解析
2019/10/17 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
周一给客户的问候语
2015/11/10 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫