AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Jquery的.post说解（一）

2009-12-29 846
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 准备工作 ·Customer类 public class Customer{    public int Unid { get; set; }    public string CustomerName { get; set; }    public string Memo { get...

准备工作

·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格式请求返回。可以省略。

 

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明：博客园

文章标签：
数据格式
Web App开发
JSON
前端开发
JavaScript
关键词：
jQuery说解
厅一一
目录
相关文章
厅一一
|
Web App开发 JSON JavaScript
Jquery的.post说解（二）
$.post 调用webservice，通过Response来返回数据。 （一）Hello ·ws [WebMethod]public void HelloWorld(){    HttpResponse Response = HttpContext.
厅一一
769 0
厅一一
|
Web App开发 XML JSON
jquery的.get方法说解
准备工作 ·Customer类 public class Customer {     public int Unid { get; set; }     public string CustomerName { get; set; }     public string Memo { ...
厅一一
585 0
哈你真皮
|
9天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
47 21
哈你真皮
|
10天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
哈你真皮
41 16
哈你真皮
|
5天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
哈你真皮
26 9
游客dng4gjyb342he
|
8天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽，可以通过CSS定制外观，支持无限循环模式，内置水平，垂直和淡入淡出三种轮播图过渡动画效果。
游客dng4gjyb342he
37 11
游客dng4gjyb342he
|
10天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单，通过在页面中放置指定的HTML代码，即可生成带动画效果的进度条。
游客dng4gjyb342he
35 12
游客dng4gjyb342he
|
9天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画，制作文字的上下左右移动效果。
游客dng4gjyb342he
27 7
哈你真皮
|
6天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
哈你真皮
19 2
游客dng4gjyb342he
|
6天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。
游客dng4gjyb342he
24 2