Summary of WebService method calling in jQuery

I personally think there are two points that are more convenient: first, when making an ajax request to WebService, the url of the request is written as the service address/Method Name of the call, in this way, the method to be called is determined in the request url, and the WebService Code does not need to determine which method the ajax request calls. Second, the method can return more data types, such as objects and generic sets. After ajax requests return, these types are automatically converted to json objects. To use the ashx method, you must convert the data type to json format before returning the data.
When using jQuery to call WebService methods, only post requests can be sent. To return json data, set contentType to application/json; the returned data is a json object with the letter d as the key value.
1. Return string type Copy codeThe 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 );
}
});

Note the preceding method of obtaining data: result. d, because the format of the returned json data is a json object with d as the key value. You can press F12, select Network, and click capture to refresh the page to view the list of all requests, as shown in: select one of them, click to go to The Details View to view the sent request and response content, as shown in: based on the content of the corresponding body, we can see why result is used. d To get the returned content.2. Return object type
Copy codeThe 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 set type Copy codeThe Code is as follows: [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 = "3 rwer "},
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 a generic set, the corresponding body is {"d": [{"_ type": "WebServiceDemo. user "," Id ": 1," UserName ":" zhang san "," Password ":" asfasdf "},{" _ type ":" WebServiceDemo. user "," Id ": 2," UserName ":" li si "," Password ":" 3 rwer "},{" _ type ":" WebServiceDemo. user "," Id ": 3," UserName ":" wang wu "," Password ":" rqwe "}]}. In this case, result. d returns an array and uses the each method to traverse the attribute values of each item in the array.
4. Pass parameters. When passing parameters, note that the parameter name of the ajax request must be the same as that of the method in WebService; otherwise, the call cannot be successful.Copy codeThe 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 );
}
});