Summary of calling WebService methods in jQuery_jquery

Personally, I feel that there are two points that are more convenient: First, when making an ajax request to WebService, the requested url is written as: service address/called method name, so that the method to be called is determined in the requested url. Now, there is no need to judge which method is called by the ajax request in the WebService code. Second, the method can return more data types, such as objects, generic collections, etc.; after the ajax request returns, these types will be automatically converted into json objects. If you use ashx, you need to convert these types into json format data before returning it.
When using jQuery to call the WebService method, you can only send post requests; if you want to return data in json format, you need to set the contentType to application/json; the returned data uses the letter d as the key value json object.
1. Return string type

Copy code The code is as follows:

[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);
}
});

Pay attention to the way to obtain data above: result.d. This is because the returned json data format is a json object with d as the key value. You can use the developer tools of IE 9, press F12, select the network, click the Start Capture button, and refresh the page to see all the request list, as shown below:

Select one of them and click to go to the detailed view. You can see the request sent and the content of the response, as shown below:

Based on the content of this corresponding text, we can see why result.d is used to obtain the returned content.

2. Return object type

Copy code The code is as follows:

[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. Return the generic collection type

Copy code The code is as follows:

[WebMethod]
public List GetUserList()
{
List list = new List ()
{
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);
}) ;
}
});

For generic collections, the corresponding text is: {"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"}]}. At this time, result.d gets an array, and the attribute value of each item in the array is traversed through the each method.
4. Pass parameters. When passing parameters, it should be noted that the name of the ajax request parameter must be consistent with the name of the method in WebService, otherwise the call will not succeed.

Copy code The code is as follows:

[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);
}
});