JQuery processes json and ajax return JSON instance code _ jquery-js tutorial

Source: Internet
Author: User
Json data is a type of data storage method for real-time data interaction. The most commonly used method is ajax and json. Next I will introduce jquery's json data processing method. I. Basic knowledge about JSON.

Objects in JSON are identified by "{}". A "{}" represents an object, for example, {"AreaId": "123 "}, the object value is in the form of a key-value Pair (key: value ).

"[]", Identifies an array. Each data in the array is separated by ",", for example, ["AreaId": "123", "AreaId": "345"].

In many cases, the object array is like this:

The Code is as follows:


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

In fact, arrays are also an object. The above format can also be written as follows:

The Code is as follows:


{"Area": [{"AreaId": "123" },{ "AreaId": "345"}]}

This indicates an Area object. It has two sub-data, each of which is also an object, and each sub-object is AreaId.

The definition formats of strings and characters in JSON are similar to General C language definitions. Double quotation marks define strings and single quotation marks define characters.

JSON keys are enclosed in double quotation marks. For example, the preceding "Area" and "AreaId" are enclosed in double quotation marks. When JSON strings are constructed in some languages, escape double quotation marks with escape characters.

Ii. JSON characters for javascript operations

1. distinguish between JSON strings and JSON objects.

JSON string:

The Code is as follows:


Var strJSON = "{" Area ": [{" AreaId ":" 123 "},{" AreaId ":" 345 "}]}",

It can also be written as follows:

The Code is as follows:


Var strJSON = '{"Area": [{"AreaId": "123" },{ "AreaId": "345"}]}',

This indicates a JSON string. Because both single quotation marks and double quotation marks can represent a string in Js, the first double quotation marks and the second one use single quotation marks to represent a JSON string.

Next let's take a look at the JSON object.

The Code is as follows:


Var JSON = {"Area": [{"AreaId": "123" },{ "AreaId": "345"}]},

As you can see, the outermost side of a JSON object does not contain single or double quotation marks, which indicates a JSON object.


Script for server disconnection:

The Code is as follows:


$ Data ['id'] = 1;
$ Dat ['name'] = "mary ";
$ Da ['red'] = array_merge ($ data, $ dat );
$ Data1 ['id'] = 2;
$ Dat1 ['name'] = "Swallow ";
$ Da ['blue'] = array_merge ($ data1, $ dat1 );
Print_r ($ da); // print out a two-dimensional array (as shown below)

/*
Array
(
[Red] => Array
(
[Id] => 1
[Name] => mary
)
[Blue] => Array
(
[Id] => 2
[Name] => swallow
)
)
*/

Echo json_encode ($ da); // The output is a string converted to json format and can be directly used in js (as follows)
/*
{"Red": {"id": 1, "name": "mary"}, "blue": {"id": 2, "name ": "u71d5u5b50 "}}
*/
?>

Jquery script:

Processing after return to js:
First, varl conversion is used: When a string is used, eval is used to convert it into a jquery object (as follows)

The Code is as follows:


Var arr = '{"red": {"id": 1, "name": "mary"}, "blue": {"id": 2, "name ": "u71d5u5b50"} '; // u71d5u5b50, which is automatically converted in php
Var dataObj = eval ("(" + arr + ")"); // I do not know the reason why parentheses and double quotation marks are added here. It is the json syntax, you can only memorize it.
$. Each (dataObj, function (idx, item ){
// Output
Alert (item. id + "Haha" + item. name );
})

Type 2: do not need to convert:

The Code is as follows:


Var arr = {"red": {"id": 1, "name": "mary"}, "blue": {"id": 2, "name ": "u71d5u5b50 "}};
$. Each (arr, function (idx, item ){
// Output
Alert (item. id + "Haha" + item. name );
})

There are two methods for loop:
// Method 1:

The Code is as follows:


$. Each (arr, function (idx, item ){
// Output
Alert (item. id + "Haha" + item. name );
})

// Method 2:

The Code is as follows:


For (var key in arr ){
Alert (key );
Alert (arr [key]. status );
}

You can try the results.

Processing Method When ajax returns JSON

1. Use a normal aspx page for processing
I think this method is the easiest to handle. Let's look at the following code.

The Code is as follows:


$. Ajax ({
Type: "post ",
Url: "Default. aspx ",
DataType: "json ",
Success: function (data ){
$ ("Input # showTime"). val (data [0]. demoData );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (errorThrown );
}
});



Here is the code for passing data in the background

The Code is as follows:


Response. Clear ();
Response. Write ("[{" demoData ":" This Is The JSON Data "}]");
Response. Flush ();
Response. End ();

This processing method directly parses the transmitted data into json data. That is to say, the front-end js code here may directly parse the data into json object data instead of string data, for example, data [0]. demoData: The json object data is directly used here.

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.