jQuery Ajax异步处理Json数据详解


Posted in Javascript onNovember 05, 2013

先我们来看一个官方的实例
使用 AJAX 请求来获得 JSON 数据,并输出结果:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});
 

该函数是简写的 Ajax 函数,等价于:
$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。
传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:
$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});
 

一个与asp.net实例
首先给出要传的json数据:[{"demoData":"This Is The JSON Data"}]
1,使用普通的aspx页面来处理
本人觉得这种方式处理起来是最简单的了,看下面的代码吧
$.ajax({ 
                                        type: "post", 
                                        url: "Default.aspx", 
                                        dataType: "json", 
                                        success: function (data) { 
                                                $("input#showTime").val(data[0].demoData); 
                                        }, 
                                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
                                                alert(errorThrown); 
                                        } 
                                });

这里是后台传递数据的代码
Response.Clear(); 
Response.Write("[{"demoData":"This Is The JSON Data"}]"); 
Response.Flush(); 
Response.End();

这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据
2,使用webservice(asmx)来处理
这种处理方式就不会将传递过来的数据当成是json对象数据,而是作为字符串来处理的,如下代码
$.ajax({     
type: "post",     
url: "JqueryCSMethodForm.asmx/GetDemoData",     
dataType: "json",/*这句可用可不用,没有影响*/
contentType: "application/json; charset=utf-8",     
success: function (data) {     
$("input#showTime").val(eval('(' + data.d + ')')[0].demoData);
//这里有两种对数据的转换方式,两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);
},     
error: function (XMLHttpRequest, textStatus, errorThrown) {     
alert(errorThrown);     
}     
});

下面这里为asmx的方法代码
[WebMethod]     
public static string GetDemoData() {     
return "[{"demoData":"This Is The JSON Data"}]";     
}
 

这里的这种处理方式就把传递回来的json数据当成了字符串来处理的,所在就要对这个数据进行eval的处理,这样才能成为真正的json对象数据,
我们先来看一下html模板:
  <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>

 一定要注意的就是里面所有的id属性,这个是一个关键。再来看一下AJAX请求和绑定数据的代码
    $.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "BackHandler.ashx",//要访问的后台地址
            data: "pageIndex=" + pageIndex,//要发送的数据
            complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
            success: function(msg){//msg为返回的数据,在这里做数据绑定
                var data = msg.table;
                $.each(data, function(i, n){
                    var row = $("#template").clone();
                    row.find("#OrderID").text(n.订单ID);
                    row.find("#CustomerID").text(n.客户ID);
                    row.find("#EmployeeID").text(n.雇员ID);
                    row.find("#OrderDate").text(ChangeDate(n.订购日期));
                    if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
                    row.find("#ShippedName").text(n.货主名称);
                    row.find("#ShippedAddress").text(n.货主地址);
                    row.find("#ShippedCity").text(n.货主城市);
                    row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");                    
                    row.attr("id","ready");//改变绑定好数据的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });

这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份,接下来row.find("#OrderID").text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
所有的这些,都是放在一个静态的页面里,只通过AJAX方法从后台获取数据,所有html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test1</title>
    <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
    <script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
    <div>
         <div>
            <br />
            <input id="first" type="button" value="  <<  " /><input id="previous" type="button"
                value="  <  " /><input id="next" type="button" value="  >  " /><input id="last" type="button"
                    value="  >>  " />
             <span id="pageinfo"></span>
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>
        </div>
        <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
            LOADING....
        </div>
        <input type="hidden" id="pagecount" />
    </div>
</body>
</html>

PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板
         <ul id="datas">
                <li id="template">
                    <span id="OrderID">
                        fsdfasdf
                    </span>
                    <span id="CustomerID">
                    </span>
                    <span id="EmployeeID">
                    </span>
                    <span id="OrderDate">
                    </span>
                    <span id="ShippedDate">
                    </span>
                    <span id="ShippedName">
                    </span>
                    <span id="ShippedAddress">
                    </span>
                    <span id="ShippedCity">
                    </span>
                    <span id="more">
                    </span>
                </li>
            </ul>

还 是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不 会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成 服务器控件的模板)。
Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
js读取cookie方法总结
Oct 31 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 #Javascript
客户端js性能优化小技巧整理
Nov 05 #Javascript
js倒计时小程序
Nov 05 #Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 #Javascript
javascript使用location.search的示例
Nov 05 #Javascript
jquery按回车提交数据的代码示例
Nov 05 #Javascript
js jq 单击和双击区分示例介绍
Nov 05 #Javascript
You might like
PHP 替换模板变量实现步骤
2009/08/24 PHP
php实现简单的上传进度条
2015/11/17 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
详解anaconda安装步骤
2020/11/23 Python
土建资料员岗位职责
2014/01/04 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
旷课检讨书1000字
2014/02/14 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
婚宴领导致辞
2015/07/28 职场文书
感恩教育主题班会
2015/08/12 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android