jQuery中調用WebService方法小結

個人感覺有兩點是比較方便的：第一，在對WebService做ajax請求的時候，請求的url的寫法是：服務地址/調用的方法名稱，這樣在請求的url中就確定了要調用的方法了，不必再在WebService代碼中去判斷ajax請求調用的是哪個方法了。第二，方法可以返回更多的資料類型，比如對象，泛型集合等；在ajax請求返回後，會自動將這些類型轉換為json對象。而使用ashx的方式的話，需要先將這些類型轉換為json格式的資料才能返回。
　　在使用jQuery調用WebService的方法的時候，只能發送post方式的請求；如果要返回json格式的資料的話，需要將contentType設定為application/json；返回的資料是以字母d為索引值的json對象。
1.返回字串類型
複製代碼 代碼如下:
[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);
}
});

注意上面擷取資料的方式：result.d,這是因為在返回的json資料格式是以d為索引值的json對象。可以通過IE 9的開發人員工具，按下F12，選擇網路，點擊開始捕獲按鈕，重新重新整理一下頁面可以看到所有的請求列表，如所示：選擇其中一個，點擊轉到詳細視圖，可以看到發送的請求以及響應的內容，如所示：根據這個相應本文的內容，我們可以看出為什麼要使用result.d來擷取返回的內容了。2.返回物件類型
複製代碼 代碼如下:
[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.返回泛型集合類型
複製代碼 代碼如下:
[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);
});
}
});

對於泛型集合，對應的相應本文為：{"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"}]}。這時，result.d得到的是一個數組，通過each方法來遍曆數組的每一項的屬性值。
4.傳遞參數。在傳遞參數的時候，需要注意的是，ajax請求的參數的名稱必須和WebService中的方法的名稱一致，否則調用不能成功。
複製代碼 代碼如下:
[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);
}
});