Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to use Jquery+JSON+WebService. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Jquery as an excellent JS framework, not to mention the easy-to-use features. In the actual development process, use the AJAX function of JQ to call WebService

The interface to realize the function of AJAX has also become a more common technical means. The implementation of WebService interface is usually implemented by OOP language. So

In the interface functions of WebService, it is inevitable to encounter complex data types other than simple data types. The data type of complex data is likely to be

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

1. For the parameters of complex types of WebService API, how should the JSON data passed in when JQ is called?

2. JQ calls WebService to get 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, VS2008 SP1.

Test 1: for WebService simple parameter types:

The copy code is as follows:

The WebService API 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':'zhangsan'}"

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

Error: function (error) {

Alert ("call error" + error.responseText)

}

});

Tip: in the $. Ajax function, data must represent JSON as a string and cannot be passed in directly with JSON data. Some friends may have strings for JSON objects and JSON objects

It's not easy to tell. In fact, strings are similar to those quoted by "" in C #, while the JSON object is written directly in {}. The simple test method is to pop up directly through the alert function, if the display [object:object]

Is a JSON object, otherwise it is a string.

The result is as follows:

Test 2: for WebService complex parameter types:

The copy code is as follows:

The WebService API 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':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}"

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

Error: function (error) {

Alert ("call error" + error.responseText)

}

});

The result is as follows:

The calling process is similar to a simple parameter type, that is, by using a string representing the person object of Person in JS, when it is sent to the client, WebService automatically sets the string of the person object

Convert to a Person solid object.

Test 3: for WebService complex return types

The copy code is as follows:

The WebService API function code is as follows:

[WebMethod (Description = "Test method")]

Public List GetPersonalList ()

{

List persons = new List

{

New Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866"}

}

Return persons

}

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)

}

});

As shown below:

That is to say, for complex return types, simple types are treated in basically the same way.

I have heard the idea that when Jq is called WebSevice, when JSON is used as the data exchange format, the returned data type must be serializable. Is that true? huh?

There is no doubt that the basic data types of .net are indeed serializable. So whether List data types can be serialized.? Look at the metadata (Metadata) information of List

We'll know.

[DebuggerTypeProxy (typeof (Mscorlib_CollectionDebugView))]

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

[Serializable]

Public class List: IList, ICollection, IEnumerable, IList, ICollection, IEnumerable

{

/ * /

}

If the above statement is true, there is nothing wrong with the success of the call in this case. But is that really the question? huh? Let's continue with the test:

Test 4: for WebService complex return types

The copy code is as follows:

[WebMethod (Description = "Test method")]

Public Person GetPerson ()

{

Person person = new Person {

Address = "beijing", Age = 27

Name = "zhangshan", Tel = "01082678866"

}

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':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}"

Success: function (json) {$(json.d) .each (function () {alert (this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel)})}

Error: function (error) {

Alert ("call error" + error.responseText)

}

});

As shown below:

But in test 4, the GetPerson () method returns the Person data type. If you look at the definition of Person entities, there is no tag ask serializable at all.

The result shows that when JQ calls WebService, it does not necessarily need to return data of complex types that must be serializable.

Let's do an interesting test. Everyone knows that the return type of WebService cannot be of type Hashtable. Because it implements because it implements the IDictionary interface.

Test 5: for WebService complex return types

The copy 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, the Jq can be called successfully. This is a bit unexpected.

Summary:

1. When JSON is used as a data exchange form between Jq and WebService, contentType: "application/json; charset=utf-8" must be specified.

Otherwise, WebService doesn't know what kind of data to convert.

2. Jq calls WebService to return complex data types and does not necessarily require the type to be serializable.

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

Thank you for reading! This is the end of the article on "how to use Jquery+JSON+WebService". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.