JQuery AJAX processing Mode when returning JSON (three ways) _ajax related

Source: Internet
Author: User
Tags eval

When using jquery's AJAX approach, which requires the returned data to be JSON data, there are a couple of questions that are encountered in the process of generating JSON data in different ways, how it should be handled in the $.ajax method, which is described in turn, Because I am using the asp.net, so the processing of the pages are used. NET to do! The other way should be the same.

First, some basic knowledge of JSON.

The objects in JSON are identified by "{}", and a "{}" represents an object, such as {"Areaid": "123"}, and the object's value is the form of a key-value pair (key:value).

"[]", identifies an array, and splits the data within the array through "," such as ["Areaid": "123", "Areaid": "345"].

In many cases it's an array of objects, and that's it:

[{"Areaid": "123"},{"Areaid": "345"}]

In fact, an array is also an object, and the format above can be written like this:

{' area ': [{' Areaid ': ' 123 '},{' areaid ': ' 345 '}]}

This represents an area object, which has two child data, each of which is an object, and each child object is areaid.

The definition format for strings and characters in JSON is similar to the general Class C language definition, with double quotes defining strings and single quotes defining characters.

The key in JSON is enclosed in double quotes, such as "area" and "Areaid", which are enclosed in double quotes, and you can use escape character escape double quotes when constructing JSON strings in some languages.

First gives the JSON data to be passed: [{"Demodata": "This is the JSON data"}]

1, using the normal ASPX page to handle

I think this is the easiest way to deal with it, look at the code below

$.ajax ({ 
 type: "Post", 
URL: "default.aspx", 
DataType: "JSON", 
success:function (data) { 
$ (" Input#showtime "). Val (data[0].demodata); 
 }, 
error:function (XMLHttpRequest, Textstatus, Errorthrown) { 
alert (Errorthrown); 
 } 

This is the code that passes the data in the background

Response.Clear (); 
Response.Write ("[{\" demodata\ ": \" is the JSON Data\ "}]"); 
Response.Flush (); 

This way of processing will pass over the data directly parsed into JSON data, that is, the foreground JS code here may be directly to parse the data into JSON object data, rather than string data, such as Data[0].demodata,

This is where the JSON object data is used directly.

2, using WebService (ASMX) to handle this process does not treat the passed data as JSON object data , but as a string, as the following code

$.ajax ({   
type: "Post",   
URL: "Jquerycsmethodform.asmx/getdemodata",   
dataType: "JSON", * * This sentence can not be used, no impact * * 
contentType: "Application/json; Charset=utf-8 ",   
success:function (data) {   
$ (" Input#showtime "). Val (eval (' + DATA.D + ') ') [0].demodata); 
There are two ways to convert data, as//$ ("Input#showtime") in two ways. Val (eval (DATA.D) [0].demodata); 
},   
error:function ( XMLHttpRequest, Textstatus, Errorthrown) {   
alert (errorthrown);   
}   

Here is the method code for ASMX [WebMethod]

public static string Getdemodata () {return   
"[{\" demodata\ ": \" ' This is the JSON data\ '}] ';   
}  

The way this is done is to treat the returned JSON data as a string, which is where the data is to be processed in an eval so that it becomes the true JSON object data.

3, using the Ashx file to handle this approach is the same as normal ASPX page handling so there's not much to explain!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.