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获取本机内网和外网ip地址的实现代码
Jun 01 NodeJs
Nodejs初级阶段之express
Nov 23 NodeJs
nodejs中向HTTP响应传送进程的输出
Mar 19 NodeJs
nodejs连接mysql数据库简单封装示例-mysql模块
Apr 10 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
nodejs 图片预览和上传的示例代码
Sep 30 NodeJs
Nodejs下使用gm圆形裁剪并合成图片的示例
Feb 22 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
NodeJS如何实现同步的方法示例
Aug 24 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
NodeJS http模块用法示例【创建web服务器/客户端】
Nov 05 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
工程监理应届生求职信
2013/11/09 职场文书
银行职员思想汇报
2013/12/31 职场文书
优秀党员主要事迹
2014/01/19 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书