jquery handles JSON and Ajax return JSON instances [go]

Source: Internet
Author: User

JSON data is a type of data storage method of real-time data interaction, using the most should be Ajax and JSON used together, let me introduce you to the jquery processing JSON data method.

First, some basic knowledge of JSON.

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

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

In many cases an array of objects, that is:

The code is as follows Copy Code

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

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

The code is as follows Copy Code

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

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

The definition format of strings and characters in JSON is similar to the generic C language definition, double quotation marks define strings, and single quotation marks define characters.

The JSON key (key) is enclosed in double quotation marks, such as "area" and "Areaid", which are enclosed in double quotation marks, and you can escape double quotes using escaped characters when constructing JSON strings in some languages.

Second, JavaScript operation JSON character

1. First to distinguish between JSON strings and JSON objects

JSON string:

The code is as follows Copy Code

Var Strjson = "{" "area": [{"Areaid": "123"},{"Areaid": "345"}]} ",

In fact, it can be written like this:

The code is as follows Copy Code

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

This represents a JSON string, since both single and double quotation marks in JS can represent a string, so the first one using double quotation marks and the second one using single quotation marks represents a JSON string.

Here's a look at the JSON object

The code is as follows Copy Code

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

See, there is no single or double quotation mark on the outermost side of the JSON object, which represents a JSON object.

Scripts that are disconnected from the server:

The code is as follows Copy Code

<?php $data [' id '] = 1; $dat [' name '] = "Mary"; $da [' Red ']= array_merge ($data, $dat); $data 1[' id '] = 2; $dat 1[' name '] = "swallow"; $da [' Blue ']= array_merge ($data 1, $dat 1); Print_r ($DA);////printing out is a two-dimensional array (see below)

/* Array ([red] + = array ([ID] + 1 [name] = Mary) [Blue] =&G T Array ([id] = 2 [name] = Swallow)) */

echo Json_encode ($DA);//output is a string converted to JSON format, you can directly in the JS (below)//* {"red": {"id": 1, "name": "Mary"}, "Blue": {"id": 2, "name": "U71d5u5b50"}} */?>

jquery script:

Return to JS after processing: the first to use the Varl conversion: The string is the time to use Eval into jquery object (as follows)

The code is as follows Copy Code
var arr = ' {"Red": {"id": 1, "name": "Mary"}, "Blue": {"id": 2, "name": "U71d5u5b50"}} ';//u71d5u5b50 this is the auto-convert var in php dataobj = eval ("(" ("+arr+") "); I don't know why I'm adding braces and double quotes here, but as JSON syntax, I can only memorize $.each (Dataobj,function (Idx,item) {//Output alert (ITE   m.id+ "haha" +item.name); })

The second type: no conversions required:

The code is as follows Copy Code
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 ways of looping://Method One:

The code is as follows Copy Code
$.each (Arr,function (Idx,item) {//Output alert (item.id+ "haha" +item.name);})

Method Two:

The code is as follows Copy Code
for (var key in arr) {alert (key);  alert (arr[key].status); }

We can try the effect.

How Ajax is handled when it returns JSON

1, using the normal ASPX page processing I think this way is the simplest to deal with, look at the following code

The code is as follows Copy Code
$.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 &NBSP for passing data in the background;

tr>
  code as follows copy code
response.clear ();                          Response.Write ("[{" Demodata ":" This is the JSON Data "}]");                          Response.Flush ();                          Response.End ();

This process of processing the data passed directly into the JSON data, that is to say, the foreground JS code can directly parse the data into JSON object data, rather than string data, such as Data[0].demodata, this is the direct use of this JSON object data

jquery handles JSON and Ajax return JSON instances [go]

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.