快捷導(dǎo)航

jQuery中調(diào)用WebService方法小結(jié)

更新時(shí)間：2011年03月28日 22:16:06 作者：

以前在寫ajax請(qǐng)求時(shí)，總是喜歡使用jQuery+ashx的方式進(jìn)行調(diào)用，今天采取jQuery+WebService的方法來做ajax請(qǐng)求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。

個(gè)人感覺有兩點(diǎn)是比較方便的：第一，在對(duì)WebService做ajax請(qǐng)求的時(shí)候，請(qǐng)求的url的寫法是：服務(wù)地址/調(diào)用的方法名稱，這樣在請(qǐng)求的url中就確定了要調(diào)用的方法了，不必再在WebService代碼中去判斷ajax請(qǐng)求調(diào)用的是哪個(gè)方法了。第二，方法可以返回更多的數(shù)據(jù)類型，比如對(duì)象，泛型集合等；在ajax請(qǐng)求返回后，會(huì)自動(dòng)將這些類型轉(zhuǎn)換為json對(duì)象。而使用ashx的方式的話，需要先將這些類型轉(zhuǎn)換為json格式的數(shù)據(jù)才能返回。
　　在使用jQuery調(diào)用WebService的方法的時(shí)候，只能發(fā)送post方式的請(qǐng)求；如果要返回json格式的數(shù)據(jù)的話，需要將contentType設(shè)置為application/json；返回的數(shù)據(jù)是以字母d為鍵值的json對(duì)象。
1.返回字符串類型

復(fù)制代碼代碼如下:

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

$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/HelloWorld", 
data: "{}", 
dataType: "json", 
success: function (result) { 
alert(result.d); 
} 
}); 

注意上面獲取數(shù)據(jù)的方式：result.d,這是因?yàn)樵诜祷氐膉son數(shù)據(jù)格式是以d為鍵值的json對(duì)象?？梢酝ㄟ^IE 9的開發(fā)人員工具，按下F12，選擇網(wǎng)絡(luò)，點(diǎn)擊開始捕獲按鈕，重新刷新一下頁面可以看到所有的請(qǐng)求列表，如下圖所示：

選擇其中一個(gè)，點(diǎn)擊轉(zhuǎn)到詳細(xì)視圖，可以看到發(fā)送的請(qǐng)求以及響應(yīng)的內(nèi)容，如下圖所示：

根據(jù)這個(gè)相應(yīng)正文的內(nèi)容，我們可以看出為什么要使用result.d來獲取返回的內(nèi)容了。

2.返回對(duì)象類型

復(fù)制代碼代碼如下:

 
[WebMethod] 
public User GetUser() 
{ 
User user = new User() { Id = 1, UserName = "zhang san", Password = "123qwe" }; 
return user; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/GetUser", 
data: "{}", 
dataType: "json", 
success: function (result) { 
alert(result.d.Id + " " + result.d.UserName); 
} 
}); 

3.返回泛型集合類型

復(fù)制代碼代碼如下:

 
[WebMethod] 
public List<User> GetUserList() 
{ 
List<User> list = new List<User>() 
{ 
new User{Id=1,UserName="zhang san",Password="asfasdf"}, 
new User{Id=2,UserName="li si",Password="3rwer"}, 
new User{Id=3,UserName="wang wu",Password="rqwe"} 
}; 
return list; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/GetUserList", 
data: "{}", 
dataType: "json", 
success: function (result) { 
$.each(result.d, function (index, data) { 
alert(data.Id+" "+data.UserName); 
}); 
} 
}); 

對(duì)于泛型集合，對(duì)應(yīng)的相應(yīng)正文為：{"d":[{"__type":"WebServiceDemo.User","Id":1,"UserName":"zhang san","Password":"asfasdf"},{"__type":"WebServiceDemo.User","Id":2,"UserName":"li si","Password":"3rwer"},{"__type":"WebServiceDemo.User","Id":3,"UserName":"wang wu","Password":"rqwe"}]}。這時(shí)，result.d得到的是一個(gè)數(shù)組，通過each方法來遍歷數(shù)組的每一項(xiàng)的屬性值。
4.傳遞參數(shù)。在傳遞參數(shù)的時(shí)候，需要注意的是，ajax請(qǐng)求的參數(shù)的名稱必須和WebService中的方法的名稱一致，否則調(diào)用不能成功。

復(fù)制代碼代碼如下:

 
[WebMethod] 
public string Hello(string name) 
{ 
return "Hello " + name; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/Hello", 
data: "{name:'admin'}", 
dataType: "json", 
success: function (result) { 
alert(result.d); 
} 
}); 