zoukankan      html  css  js  c++  java
  • Jquery getJSON方法分析


    准备工作

    ·Customer类

    复制代码
    public class Customer
    {
        public int Unid { getset; }
        public string CustomerName { getset; }
        public string Memo { getset; }
        public string Other { getset; }
    }
    复制代码

    ·服务端处理(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循环来打印这条宋江的记录:

    复制代码
    $.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)修改:

    复制代码
    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开始的索引。

    复制代码
    $.getJSON(
        "webdata/Json_1.ashx",
        function(data) {
            $.each(data, function(k, v) {
                alert(k);
            });
    });
    复制代码

    这时,k值为0,1……

    列表json对象的方法:

    复制代码
    $.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对。

    关于序列化与反序列化请见其它随笔(JSON)

  • 相关阅读:
    CURD演示 2
    CURD演示 2
    测试关闭mojo utf-8
    测试关闭mojo utf-8
    mojo 关闭utf8
    mojo 关闭utf8
    标准Web系统的架构分层
    Myeclipse学习总结(6)——MyEclipse断点调试
    RabbitMQ学习总结(7)——Spring整合RabbitMQ实例
    RabbitMQ学习总结(7)——Spring整合RabbitMQ实例
  • 原文地址:https://www.cnblogs.com/baiduligang/p/4247170.html
Copyright © 2011-2022 走看看