Summary of Jquery + JSON + WebService

Jquery, as an excellent JS framework, is easy to use. In the actual development process, the jq ajax function is used to call WebService.

Interface to implement AJAX functions has become a more common technical means. The implementation of WebService interfaces is usually implemented by the OOP language. So

In WebService interface functions, complex data types except simple data types are inevitable. Complex data types may be

The parameter in the WebService interface may also be the return value of WebService. The main points described in this article are:

1. for Parameters of complex types of WebService interfaces, how should the JSON data passed in during JQ call be expressed .?

2. JQ calls WebService to obtain the JSON data type.

3. What are the requirements for the complex data types returned by Webservice when JQ is called .?

Environment: JQ version: 1.4.2 and VS2008 SP1.

Test 1: For WebService simple parameter types:
Copy codeThe Code is as follows:
The WebService interface function code is as follows:

[WebMethod (Description = "Test Method")]
Public string ProcessPersonalInfo (Person person)
{
Return person. Name + person. Tel;
}
The JQ call code is as follows:

$. Ajax ({

Type: "POST ",

Url: "WebService1.asmx/GetString ",

DataType: "json ",

ContentType: "application/json; charset = UTF-8 ",

Data: "{'name': 'hangsan '}",

Success: function (json) {alert (json. d )},

Error: function (error ){

Alert ("call error" + error. responseText );

}
});

Tip: In the $. ajax function, data must represent JSON in the form of a string, rather than directly passing in JSON data. Some friends may have strings for JSON objects and JSON objects.

In fact, strings are similar to things caused by "" in C #, while JSON objects are directly written in. The simple test method is to directly use the alert function to pop up. If [object: object] is displayed,

It is a JSON object, otherwise it is a string.

The result is as follows:

Test 2: complex WebService parameter types:
Copy codeThe Code is as follows:
The WebService interface function code is as follows:

[WebMethod (Description = "Test Method")]
Public string ProcessPersonalInfo (Person person)
{
Return person. Name + person. Tel;
}

Person entity:

Public class Person
{
Public string Name {get; set ;}

Public int Age {get; set ;}

Public string Address {get; set ;}

Public string Tel {get; set ;}

}

The JQ call code is as follows:

$. Ajax ({

Type: "POST ",

Url: "WebService1.asmx/ProcessPersonalInfo ",

DataType: "json ",

ContentType: "application/json; charset = UTF-8 ",

Data: "{'person ': {'name': 'hangsan', 'age': 28, 'address': 'beijinging', Tel: '000000 '}}",

Success: function (json) {alert (json. d )},

Error: function (error ){

Alert ("call error" + error. responseText );
}
});

　　The result is as follows:

The call process is similar to the simple parameter type. It is a string used in JS to represent the Person object. After being sent to the client, WebService automatically sends the person object string

Convert to Person object.

Test 3: complex WebService return types
Copy codeThe Code is as follows:
The WebService interface function code is as follows:

[WebMethod (Description = "Test Method")]
Public List <Person> GetPersonalList ()
{
List <Person> persons = new List <Person>
{
New Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866 "}
};
Return persons;
} <BR> the JQ call code is as follows:

$. Ajax ({

Type: "POST ",

Url: "WebService1.asmx/GetPersonalList ",

DataType: "json ",

ContentType: "application/json; charset = UTF-8 ",

Success: function (json) {$ (json. d ). each (function () {alert (this. name + "-" + this. age + "-" + this. address + "-" + this. tel )})},

Error: function (error ){

Alert ("call error" + error. responseText );

}

});

For example:

That is to say, for complex return types, the processing method is basically the same for simple types.

I have heard that WebSevice is called in Jq. When JSON is used as the Data Interaction format, the returned data type must be serializable. Is that true .?

The basic data type of. Net is indeed serializable, and there is no doubt about this. Can the List <T> data type be serialized .? Check the Metadata (Metadata) of List <T>.

You will know ..

[DebuggerTypeProxy (typeof (Mscorlib_CollectionDebugView <T>)]

[DebuggerDisplay ("Count = {Count}")]

[Serializable]

Public class List <T>: IList <T>, ICollection <T>, IEnumerable <T>, IList, ICollection, IEnumerable

{

/**/

}

If the above statement is true, in this case, the call is successful. But is the problem true .? Next let's continue the test:

Test 4: complex WebService return types
Copy codeThe Code is as follows:
[WebMethod (Description = "Test Method")]
Public Person GetPerson ()
{
Person person = new Person {<BR> Address = "beijing", Age = 27, <BR> Name = "zhangshan", Tel = "01082678866" <BR> };
Return person;
}

The JQ call code is as follows:

$. Ajax ({

Type: "POST ",

Url: "WebService1.asmx/GetPerson ",

DataType: "json ",

ContentType: "application/json; charset = UTF-8 ",

// Data: "{'person ': {'name': 'hangsan', 'age': 28, 'address': 'beijinging', Tel: '000000 '}}",

Success: function (json) {$ (json. d ). each (function () {alert (this. name + "-" + this. age + "-" + this. address + "-" + this. tel )})},

Error: function (error ){

Alert ("call error" + error. responseText );

}

});

For example:

However, in test 4, The GetPerson () method returns the Person data type. Let's look at the definition of the Person object, and there is no mark to ask for serialization.

The results show that JQ calls WebService and does not necessarily need to return complex types of data that must be serializable.

The following is an interesting test. We all know that the returned type of WebService cannot be Hashtable. Because it implements the IDictionary interface.

Test 5: complex WebService return types
Copy codeThe Code is as follows:
[WebMethod (Description = "Test Method")]
Public Hashtable GetPersonalHashtable ()
{
Hashtable hashtable = new Hashtable ();

Person person = new Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866 "};

Hashtable. Add (1, person );

Return hashtable;
}

The JQ call code is as follows:

$. Ajax ({

Type: "POST ",

Url: "WebService1.asmx/GetPersonalHashtable ",

DataType: "json ",

ContentType: "application/json; charset = UTF-8 ",

Data: data,

Success: function (json) {$ (json. d). each (function () {alert (this ["one"]. Name )})},

Error: function (error ){

Alert ("call error" + error. responseText );

}

});

　

In this way, Jq can be called successfully. This is a bit unexpected.

Summary:

1. When Jq and WebService use JSON as the form of data exchange, contentType: "application/json; charset = UTF-8" must be specified.

Otherwise, WebService does not know which data to convert.

2. Jq calling WebService to return complex data types does not necessarily need to be serialized.

3. The JSON data returned by WebService is obtained through ". d", as shown in alert (json. d) in the test above)