Personal feeling has two points is more convenient: first, when the AJAX request to WebService, the request URL is written: Service address/Call Method name, so in the URL of the request to determine the method to be invoked, It is no longer necessary to judge which method the AJAX request invokes in the WebService code. Second, methods can return more data types, such as objects, generic collections, and so on, and automatically convert these types to JSON objects when the AJAX request returns. Using ASHX, you need to convert these types to JSON-formatted data before you can return them.
When using jquery to invoke the WebService method, you can only send a post-mode request, and if you want to return the JSON-formatted data, you need to set the contenttype to Application/json ; The data returned is a JSON object with the letter D as the key value.
1. Return String type
Copy Code code as follows:
[WebMethod]
public string HelloWorld ()
{
Return to "Hello World";
}
$.ajax ({
Type: "Post",
ContentType: "Application/json",
URL: "Userservice.asmx/helloworld",
Data: "{}",
DataType: "JSON",
Success:function (Result) {
alert (RESULT.D);
}
});
Notice how you get the data above: RESULT.D, because the JSON data format returned is a JSON object with a value of D as the key. Through IE 9 developer tools, press F12, select the network, click the Start Capture button, refresh the page to see all the request list, as shown in the following figure:
Select one, click Go to Detailed view, you can see the request sent and the content of the response, as shown in the following figure:
Based on the content of the corresponding body, we can see why we should use RESULT.D to get the returned content.
2. Return Object type
Copy Code code 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 generic collection type
Copy Code code 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= "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 a generic collection, the corresponding body 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 point, Result.d gets an array that iterates through the property values of each item in the array by each method.
4. Pass parameters. When passing parameters, it is important to note that the name of the parameter in the AJAX request must match the name of the method in the WebService, otherwise the call cannot succeed.
Copy Code code 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);
}
});
