Jquery通过ajax请求NodeJS返回json数据实例

最近看了NodeJS相关的，在网上查了下结合AJAX的应用，感觉应用前景还是不错的。为什么用这个组合呢？

1.NodeJS不需要安装，拷贝过去就可以使用，而环境变量可以只配置在当前cmd窗口，运行方便。

2.通过HTML的ajax请求，可以实现在不同的服务器上，可跨域获取数据。

3.通信数据格式灵活，可以是xml、json、binary等，数据适合任何平台。

在说说我的环境，我使用的是公司提供的电脑，有很多限制，比如是域中电脑，操作权限低，无法安装任何软件，无法修改计算机配置，无法使用U盘等等。所以我就自己配置了一个nodejs的绿色版环境，只能在当前cmd窗口运行nodejs的相关环境；无法架设html服务器，所以就单独在D盘创建一个html文件双击打开使用。

一、node环境就不说了，可以查看以下几篇文章

http://www.jb51.net/article/33086.htm

http://www.jb51.net/article/54678.htm

http://www.jb51.net/article/57687.htm

二、编写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

以上环境都是本人亲自测试，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

    实现目的 使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容? 本文提供通过后端的Node.js程序提供一种最小化方案,作为参考. 开发环境 后端:Node.js Node.js模块:Express.body-parser.fs 前端:JQuery 后端 1.安装nodejs,装好后用显示版本号确认是否安装好 node --version 2.新建一工程目录(文件夹),安装模块. npm install express npm install b

  • NodeJs读取JSON文件格式化时的注意事项

    进行NodeJs开发时偶然发现的一个雷点 正常情况下从JSON文件读取到字符后再通过JSON.parse没什么问题,只要格式不出错 有时在确保JSON格式正确时仍然会出现unexpected token异常 经过调查发现里面有不会显示的unicode字符 于是确定是UTF-8的问题,utf-8分有dom版和无dom版,一般编辑器不刻意设置会默认保存为带dom的utf8 解决办法是先将读到的文件转成二进制,然后检索dom符号删除 代码实现部分 function readText(pathname)

  • 轻松创建nodejs服务器（10）：处理POST请求

    目前为止,我们做的服务器没有实际的用处,接下来我们开始实现一些实际有用的功能. 我们要做的是:用户选择一个文件,上传该文件,然后在浏览器中看到上传的文件. 首先我们需要一个文本区(textarea)供用户输入内容,然后通过POST请求提交给服务器. 我们在start事件处理器里添加代码,requestHandlers.js修改如下: 复制代码 代码如下: function start(response) {  console.log("Request handler 'start' was ca

  • Node.js获取前端ajax提交的request信息

    今天看一下Node.js怎么获取ajax提交的request 信息 众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息 下面我贴一下前端的代码 index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求 主要贴一下js页面的代码 $("button").on("click",function(){

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

  • nodejs读写json文件的简单方法(必看)

    nodejs 读json文件 var fs=reauire('fs'); var file="d:\\0.json"; var result=JSON.parse(fs.readFileSync( file)); //操作对象 nodejs 写json文件 var coors = {}; coors.left_top = {}; coors.right_top = {}; coors.left_bottom = {}; coors.right_bottom = {}; //填充coor

  • Node.js Express 框架 POST方法详解

    POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: <html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> First Name: <input type="text

  • 基于node.js依赖express解析post请求四种数据格式

    node.js依赖express解析post请求四种数据格式 分别是这四种: www-form-urlencoded form-data application/json text/xml 1.www-form-urlencoded 这是http的post请求默认的数据格式,需要body-parser中间件的支持 服务器端的demo: var express = require('express'); var app = express(); var bodyParser = require('

  • 详解Node.Js如何处理post数据

    详解Node.Js如何处理post数据

    实现思路 将data和end事件的回调函数直接放在服务器中,在data事件回调中收集所有的POST数据,当接收到所有数据,触发end事件后,其回调函数调用请求路由,并将数据传递给它,然后,请求路由再将该数据传递给请求处理程序. 实现步骤 第一步我们设置了接收数据的编码格式为UTF-8,第二步注册了"data"事件的监听器,用于收集每次接收到的新数据块,并将其赋值给postData 变量,最后第三步我们将请求路由的调用移到end事件处理程序中,以确保它只会当所有数据接收完毕后才触发,并且

  • Jquery通过ajax请求NodeJS返回json数据实例

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

  • jQuery中ajax请求后台返回json数据并渲染HTML的方法

    html实例 <table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"> <input type="text" name="dishes" value="" class="seek_product" placeholder="请输入

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • Springmvc处理ajax请求并返回json数据

    ①在springmvc方法上添加@ResponseBody注解,springmvc会将数据转换成json并返回: @ResponseBody //指定返回json数据,不跳转页面 @RequestMapping("/list") public List<User> list(User user){ System.out.println("获取到异步请求数据:"+user); //todo 根据条件做数据库查询,返回结果集合 ArrayList<Us

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • 通过jquery的ajax请求本地的json文件方法

    自己学习jquery的ajax的经历,记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id="test"></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.ajax({ //请求方式为get type:"GET", //json文件位置 url:"./data/shuju.json"

  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    html代码(test.html),js在html底部 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main">

  • Ajax获取php返回json数据动态生成select下拉框的实例

    功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • Python发送http请求解析返回json的实例

    python发起http请求,并解析返回的json字符串的小demo,方便以后用到. #! /usr/bin/env python # -*- coding:gbk -*- import os import sys import json import urllib import urllib2 if __name__ == "__main__": query_file = sys.argv[1] query_index = 0 with open(query_file, 'r') a

随机推荐