首页 web前端 js教程 jQuery Ajax异步处理Json数据详解_jquery

jQuery Ajax异步处理Json数据详解_jquery

May 16, 2016 pm 05:17 PM
ajax jquery json

先我们来看一个官方的实例
使用 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模板:
复制代码 代码如下:

 
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
           

                        订单ID

                        客户ID

                        雇员ID

                        订购日期

                        发货日期

                        货主名称

                        货主地址

                        货主城市

                        更多信息

                   

                   

                   

                   

                   

                   

                   

                   

                   


 一定要注意的就是里面所有的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(" More");                   
                    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代码如下:
复制代码 代码如下:




    test1
   
   


   

         

           

                            value="                      value="  >>  " />
             
           
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
           

                        订单ID

                        客户ID

                        雇员ID

                        订购日期

                        发货日期

                        货主名称

                        货主地址

                        货主城市

                        更多信息

                   

                   

                   

                   

                   

                   

                   

                   

                   

       

       

            LOADING....
       

       
   




PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板
复制代码 代码如下:

        

                   

  •                    
                            fsdfasdf
                       

                       
                       

                       
                       

                       
                       

                       
                       

                       
                       

                       
                       

                       
                       

                       
                       

                   

  •            


还 是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不 会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成 服务器控件的模板)。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PHP 数组转 JSON 的性能优化技巧 PHP 数组转 JSON 的性能优化技巧 May 04, 2024 pm 06:15 PM

PHP 数组转 JSON 的性能优化技巧

Jackson库中注解如何控制JSON序列化和反序列化? Jackson库中注解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson库中注解如何控制JSON序列化和反序列化?

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

如何使用Ajax从PHP方法中获取变量?

深入了解PHP:JSON Unicode转中文的实现方法 深入了解PHP:JSON Unicode转中文的实现方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSON Unicode转中文的实现方法

PHP 与 Ajax:创建动态加载内容的解决方案 PHP 与 Ajax:创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

PHP 与 Ajax:创建动态加载内容的解决方案

PHP 数组转 JSON 的快捷技巧 PHP 数组转 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP 数组转 JSON 的快捷技巧

PHP 与 Ajax:提高 Ajax 安全性的方法 PHP 与 Ajax:提高 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

PHP 与 Ajax:提高 Ajax 安全性的方法

征服 Java JSON 处理的巅峰:解析和创建复杂数据 征服 Java JSON 处理的巅峰:解析和创建复杂数据 Mar 09, 2024 am 09:13 AM

征服 Java JSON 处理的巅峰:解析和创建复杂数据

See all articles