• Jquery的.post说解


    Jquery的.post说解(一)

    准备工作

    ·Customer类

     

     
    public class Customer
    {
        public int Unid { get; set; }
        public string CustomerName { get; set; }
        public string Memo { get; set; }
        public string Other { get; set; }
    }

     

    jQuery.post( url, [data], [callback], [type] )

     

    ·url:加载页的地址

    ·data(optional):k/v对或序列化的字符串(.serialize()),参数

    ·callbakc(optional):数据成功加载后的执行函数

    ·type(optional):请求返回的数据格式,串型

     

    (一)ashx文件

    (1)请求单实体数据

    ·Ashx文件,这里不对返回的数据做显式的序列化。 

     

    Customer customer = new Customer 
      { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

    context.Response.Write(customer);

     

    ·ajax post

     

     
    function GetCustomer_Ashx() {
        $.post(
        "webdata/post_1.ashx",
        function(data) {
            var sx = $.JsonToObject(data);
            var tt = "";
            $.each(sx, function(k, v) {
                tt += k + ":" + v + "<br/>";
            })
            $("#divmessage").html(tt);
        },
        "json"
    );}

     

    (2)请求实体集合

    ·ashx文件

     

     
    Customer customer = new Customer 
        { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

    Customer customer2 = new Customer 
        { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };
     

        List<Customer> _list = new List<Customer>();
        _list.Add(customer);
        _list.Add(customer2);
        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

        context.Response.Write(strJson);
     

     

    ·ajax post

     

     
    function GetCustomer_AshxList() {
        $.post(
        "webdata/post_1.ashx",
        function(data) {
            var jsonObjects = $.jsonToObject(data);
            var tt = "";
            $.each(jsonObjects, function(k, v) {
                $.each(v, function(kk, vv) {
                    tt += kk + ":" + vv + "<br/>";
                });
            });

            $("#divmessage").html(tt);
        },
        "json"
        );
    }
     

    (3)带参数的请求

    ·ashx文件

    在前者基础上添加了对请求参数的获取语句,并添加了linq查询

     

    int iCustomerId = Convert.ToInt32(context.Request["iUnid"]);
            var cus = from q in _list
                      where q.Unid == iCustomerId
                      select q;

    string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);

     

    ·ajax post

     

     
    function GetCustomer_AshxWithPara() {
        $.post(
        "webdata/post_1.ashx",
        { iUnid: 1 },
        function(data) {
            var tt = "";
            $.each(data, function(k, v) {
                $.each(v, function(kk, vv) {
                    tt += kk + ":" + vv + "<br/>";
                });
            });
            $("#divmessage").html(tt);
        },
        "json"
    );}
     

    注意,这里返回的直接是json对象[object,object],可以直接解析。

    这种参数传递的方法是以k/v对格式传递,post还有一种方式,那就是.serialize()之后的字串。

     

    (二)Web Service

    (1)Hello

    ·ws

    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World";
    }

    ·ajax post

     

     
    function WebService_Hello() {
        $.post(
        "post_1.asmx/HelloWorld",
        function(data) {
            alert(data.text);
            $("#divmessage").html(data);
        },
        "json"
    );}
     

    这个web方法返回一个单独的字串。这是一个纯正的字串,对于客户端来说,这是一个object对象,但也可以理解为一个[object,object]对象,而它完整的数据格式可以理解为:{text: "Hello World"}

    所以这里对它进行访问,可以如下:

    ·data.text 这种方式对应于Object.Property

    ·data["text"] 这种方式对应于Object["key"]

    (2)json串

    ·ws

     
    [WebMethod]
    public string HelloWorld_Json()
    {
        string strJson=
          @"{Unid:1,CustomerName:""宋江"",Memo:""天魁星"",Other:""黑三郎""}";
        return strJson;
    }
     

    ·ajax post

     

     
    function WebService_HelloJsonString() {
        $.post(
        "post_1.asmx/HelloWorld_Json",
        function(data) {
            var jsonString = data.text;
            var jsonObject = $.jsonToObject(jsonString);
            var tt = "";
            $.each(jsonObject, function(k, v) {
                tt += k + ":" + v + "<br/>";
            })

            $("#divmessage").html(tt);
        },
        "json"
    );}
     

    虽然服务方法返回的是string类型的数据:

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

    但客户端得到的数据却是object类型,可以理解为[object,object],也就是

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

    客户端请求到的数据取到json字串,然后转换为json对象,后进行解析。

    所以,在请求web服务方法时,如果方法返回字串类型,先要通过data.text得到做为唯一k/v对的v值,也就是json字串,然后再进行下一步操作。

    (3)通过串行化返回json字串的web方法

    ·ws

     

     
    [WebMethod]
    public string GetCustomer_Json()
    {
        Customer customer = new Customer
          { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
        return strJson;
    }
     

    ·ajax post

     

     
    function WebService_CustomerJsonString() {
        $.post(
        "post_1.asmx/GetCustomer_Json",
        function(data) {
            var jsonString = data.text;
            var jsonObject = $.jsonToObject(jsonString);
            var tt = "";
            $.each(jsonObject, function(k, v) {
                tt += k + ":" + v + "<br/>";
            })
            $("#divmessage").html(tt);
        },
        "json"
    );}
     

    这个方法与(2)相同道理。

    (4)客户集

    ·ws

     
    [WebMethod]
    public string GetCustomerList_Json()
    {
        Customer customer = new Customer 
           { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        Customer customer2 = new Customer 
           { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" }; 

            List<Customer> _list = new List<Customer>();
            _list.Add(customer);
            _list.Add(customer2); 

            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);
            return strJson;
    }
     

    ·ajax post

     

     
    function WebService_CustomerListJsonString() {
        $.post(
        "post_1.asmx/GetCustomerList_Json",
        function(data) {
            var jsonString = data.text;
            var jsonObject = $.jsonToObject(jsonString);
            var tt = "";
            $.each(jsonObject, function(k, v) {
                $.each(v, function(kk, vv) {
                    tt += kk + ":" + vv + "<br/>";
                });
            });
            $("#divmessage").html(tt);
        },
        "json"
    );}
     

    其实得到了json字串,也就能正常解析出来。主要是理解返回的数据对象的格式。

    (5)带参数的ws

    ·ws

     
    [WebMethod]
    public string GetCustomerList_JsonPara(int iUnid)
    {
        Customer customer = new Customer 
           { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        Customer customer2 = new Customer 
           { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" }; 

            List<Customer> _list = new List<Customer>();
            _list.Add(customer);
            _list.Add(customer2); 

            var cus = from q in _list
                      where q.Unid == iUnid
                      select q; 

            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);
            return strJson;
    }
     

     ·ajax post

     

     
    function WebService_CustomerListJsonStringWithPara() {
        $.post("post_1.asmx/GetCustomerList_JsonPara",
        {iUnid:2},
        function(data) {
            var jsonString = data.text;
            var jsonObject = $.jsonToObject(jsonString);
            var tt = "";
            $.each(jsonObject, function(k, v) {
            $.each(v, function(kk, vv) {
            tt += kk + ":" + vv + "<br/>";
            });
            });
            $("#divmessage").html(tt);        
        }
     );}
     

    带参数的post时,post函数的type部分不能以json格式请求返回。可以省略。

     

  • 相关阅读:
    电子发烧友 车用总线
    Leetcode 303. 区域和检索 数组不可变(中等) 304. 二维区域和检索 矩阵不可变(中等) 560. 和为K的子数组(中等) 前缀和数组求窗口和
    Leetcode 496. 下一个更大元素I(简单) 503. 下一个更大元素II(中等) 739. 每日温度(中等) 单调栈
    Leetcode 48. 旋转图像(中等) 54. 螺旋矩阵(中等) 59. 螺旋矩阵 II(中等) 旋转遍历二维数组
    Leetcode 76. 最小覆盖子串(困难) 567. 字符串的排列(中等) 438. 找到字符串中所有字母异位词(中等) 3. 无重复字符的最长子串(中等) 滑动窗口算法
    Leetcode 704. 二分查找(简单) 34. 在排序数组中查找元素的第一个和最后一个位置(中等) 二分查找以及边界查找
    Leetcode 239. 滑动窗口最大值(困难) 单调队列解决滑动窗口最大值
    Leetocde 370. 区间加法(中等) 1109. 航班预订统计(中等) 1094. 拼车(中等) 差分数组求频繁区间增减问题
    Leetcode 875. 爱吃香蕉的珂珂(中等) 1011. 在D天内送达包裹的能力(中等) 二分查找高级用法
    Leetcode 167. 两数之和 II 输入有序数组(中等) 344. 反转字符串(简单) 两端指针夹逼
  • 原文地址:https://www.cnblogs.com/felix-/p/4330414.html
Copyright © 2020-2023  润新知