Jquery getJSON方法分析

╰半橙微兮° 2022-09-20 15:24 124阅读 0赞

准备工作

·Customer类

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->public class Customer
    {
        public int Unid { get; set; }
        public string CustomerName { get; set; }
        public string Memo { get; set; }
        public string Other { get; set; }
    }

·服务端处理（Json\_1.ashx）

Customer customer = new Customer 
          { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
    string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
    
    context.Response.Write(strJson);

（一）Jquery. getJSON

方法定义：jQuery.getJSON( url, data, callback )

通过get请求得到json数据

·url用于提供json数据的地址页

·data(Optional)用于传送到服务器的键值对

·callback(Optional)回调函数，json数据请求成功后的处理函数

function(data, textStatus) {
            // data是一个json对象
            // textStatus will be "success"
           this; // the options for this ajax request
    }

（1）一个对象

$.getJSON(
        "webdata/Json_1.ashx",
        function(data) {
           $("#divmessage").text(data.CustomerName);
        }
    );

向Json\_1.ashx地址请求json数据，接收到数据后，在function中处理data数据。 这里的data的数据是一条记录，对应于一个customer实例，其中的数据以k/v形式存在。即以\[object,object\]数组形式存在。

\{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"\}

所以在访问时，以data.Property来访问，下面以k/v循环来打印这条宋江的记录：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$.getJSON(
        "webdata/Json_1.ashx",
        function(data) {
            var tt="";
            $.each(data, function(k, v) {
                tt += k + "：" + v + "<br/>";
            })
            $("#divmessage").html(tt);
    });

结果：

Unid：1  
CustomerName：宋江  
Memo：天魁星  
Other：黑三郎

（2）对象数组

Ashx文件（Json\_1.ashx）修改：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->List<Customer> _list = new List<Customer>(); 
    Customer customer = new Customer 
           { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
    Customer customer2 = new Customer 
           { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };
    
    _list.Add(customer);
    _list.Add(customer2);
    string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

它生成的json对象的字符串是：

\[\{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"\},

\{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"\}\]

这里可以看到做为集合的json对象不是再一条记录，而是2条记录，是一个\[\[object,object\]\]数组：\[object,object\]\[object,object\]，而每个\[object,object\]表示一条记录，对应一个Customer，其实也是k/v的形式，而这个v就是一个Customer对象，而这个k是从0开始的索引。

它生成的json对象的字符串是：

\[\{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"\},

\{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"\}\]

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$.getJSON(
        "webdata/Json_1.ashx",
        function(data) {
            $.each(data, function(k, v) {
                alert(k);
            });
    });

这时，k值为0,1……

列表json对象的方法：

这时，k值为0,1……

列表json对象的方法：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$.getJSON(
        "webdata/Json_1.ashx",
        function(data) {
            var tt = "";
            $.each(data, function(k, v) {
                $.each(v,function(kk, vv) {
                    tt += kk + "：" + vv + "<br/>";
                });
            });
            $("#divmessage").html(tt);
    });

结果：

Unid：1  
CustomerName：宋江  
Memo：天魁星  
Other：黑三郎  
Unid：2  
CustomerName：吴用  
Memo：天机星  
Other：智多星

这里用了嵌套循环，第一个循环用于从List中遍历Customer对象，第二个循环用于从Customer对象中遍历Customer对象的属性，也就是k/v对。(zhuan zai bo ke yuan !)