准备工作

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

$.post

调用webservice，通过Response来返回数据。

（一）Hello

·ws

[WebMethod]
public?void?HelloWorld()
{
????HttpResponse?Response?=?HttpContext.Current.Response;
????Response.ContentEncoding?=?System.Text.Encoding.Default;
????Response.Write(“Hello?world!”);
}

·ajax post

function?ajaxVoidHello()?{
????$.post(
????”post_2.asmx/HelloWorld”,
????function(data)?{
????????var?jsonString?=?data.text;
????????$(“#divmessage”).html(data);
????},
????”json”
????);
}

客户端得到的数据类型为string类型。

（二）得到客户实体

·ws

[WebMethod]
public?void?GetCustomer()
{
????Customer?customer?=?new?Customer?
????????{?Unid?=?1,?CustomerName?=?”宋江”,?Memo?=?”天魁星”,?Other?=?”黑三郎”?};

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

????HttpResponse?Response?=?HttpContext.Current.Response;
????Response.ContentEncoding?=?System.Text.Encoding.Default;
????Response.ContentType?=?”application/json”;
????Response.Write(strJson);
}

这里ContentType很重要，这里要保留，即使空值也可以。

·ajax post

function?ajaxGetCustomer()?{
????$.post(
????”post_2.asmx/GetCustomer”,
????function(data)?{
????????var?jsonString?=?data;
????????var?jsonObject?=?$.jsonToObject(jsonString);?

????????var?tt?=?”;
????????$.each(jsonObject,?function(k,?v)?{
????????????tt?+=?k?+?”:”?+?v?+?”<br/>”;
????????});

????????$(“#divmessage”).html(tt);
????},
???”json”
);}

请求json数据，返回的是一个字符串，就是json字串，然后处理。

（三）得到客户集

·ws

[WebMethod]
public?void?GetCustomersList()
{
????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);?

????HttpResponse?Response?=?HttpContext.Current.Response;
????Response.ContentEncoding?=?System.Text.Encoding.Default;
????Response.ContentType?=?”application/json”;
????Response.Write(strJson);
}

·ajax post

function?ajaxGetCustomerList()?{
????$.post(
????”post_2.asmx/GetCustomersList”,
????function(data)?{
????????alert(data);
????????var?jsonString?=?data;
????????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字串。处理字串就可以了。

（四）带参数的

·ws

[WebMethod]
public?void?GetCustomersListWithPara(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?q?=?_list.Where(p?=>?p.Unid?==?iUnid);?

????string?strJson?=?Newtonsoft.Json.JsonConvert.SerializeObject(q);?

????HttpResponse?Response?=?HttpContext.Current.Response;
????Response.ContentEncoding?=?System.Text.Encoding.Default;
????Response.ContentType?=?””;
????Response.Write(strJson);
}

·ajax post

function?ajaxGetCustomerListWithPara()?{
????$.post(
????”post_2.asmx/GetCustomersListWithPara”,
????{?iUnid:?1?},
????function(data)?{
????????var?tt?=?”;
????????$.each(data,?function(k,?v)?{
????????????$.each(v,?function(kk,?vv)?{
????????????????tt?+=?kk?+?”:”?+?vv?+?”<br/>”;
????????????})
????????});
????????$(“#divmessage”).html(tt);
????},
???”json”
);}

这里返回的是[object,object]类型。

服务端的ContentType可以设置为空。

相关笔记

• jQuery选择器大全（几乎涵盖所有相关的选择器及其用法）
• 关于复选框和单选按钮的jQuery插件
• jQuery之wrap() 的三种用法（将匹配对象包含在给出的元素代码内 ）
• jquery 事件方法总结
• 移动web开发，12个触摸及多点触摸事件常用Js插件