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实现PHP的print_r函数代码
Mar 14 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
使用Nodejs开发微信公众号后台服务实例
Sep 03 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 NodeJs
Nodejs实现用户注册功能
Apr 14 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
软件测试企业面试试卷
2016/07/13 面试题
新闻学专业个人求职信写作
2014/02/04 职场文书
会计学自荐信
2014/06/03 职场文书
国际会计专业求职信
2014/08/04 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
心理学培训心得体会
2016/01/22 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python