Jquery handles json data instance analysis

  • 2020-03-30 03:07:35
  • OfStack

First, some basic knowledge of JSON.

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

  "[]" identifies the array, and the data inside the array is divided by ", "such as [" AreaId" : "123", "AreaId" : "345"].

A lot of times it's an array of objects, and that's it:


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

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


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

This represents an Area object, which has two subdata, each of which is also an object, and each of which is an AreaId.

  The format for defining strings and characters in JSON is similar to that of a common c-like definition, where double quotes define strings and single quotes define characters.

JSON keys are enclosed in double quotes, such as the "Area" and "AreaId" above, and can be escaped using escape characters when constructing JSON strings in some languages.

  Javascript manipulates JSON characters

1. Distinguish between JSON strings and JSON objects

JSON string:


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

It could also be written like this:


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

This represents a JSON string, and since both single and double quotation marks can represent a string in Js, the first above with double quotation marks and the second above with single quotation marks represent a JSON string.

Now look at the JSON object


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

As you can see, the outermost JSON object has no single or double quotes, which represents a JSON object.

On the server side of the script:


<?php
$data['id'] = 1;
$dat['name'] = "mary";
$da['red']= array_merge($data,$dat);
$data1['id'] = 2;
$dat1['name'] = " The swallow ";
$da['blue']= array_merge($data1,$dat1);
print_r($da);/// printed out as a 2-d array (as follows)

echo json_encode($da);//The output is a string converted to json, which can be used directly in js (as shown below)

?>

The jquery script:

Processing after returning to js:
The first thing to do with varl is to convert a string to a jquery object using eval.


var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}';//U71d5u5b50 this is automatically converted in PHP
var dataObj = eval("("+arr+")");//I don't know why I put the parentheses and double quotes here, but it's just json syntax, so I have to memorize it
  $.each(dataObj,function(idx,item){  
   // The output  
   alert(item.id+" Ha ha "+item.name);  
})

Second: those that do not need to be converted:


var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
  $.each(arr,function(idx,item){    
   // The output 
   alert(item.id+" Ha ha "+item.name);
})

There are also two ways to loop:
// method 1:


$.each(arr,function(idx,item){    
   // The output 
   alert(item.id+" Ha ha "+item.name);
})

// method 2:


for(var key in arr){
  alert(key);
  alert(arr[key].status);
 }

You can try it out.

What happens when ajax returns JSON

  1. Use normal aspx pages for processing
I think this approach is the easiest to handle, see the following 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 that passes the data in the background


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

This process directly parses the passed data into json data, which means that the foreground js code here might parse the data directly into json object data instead of string data, such as data[0].demodata, which is directly used here


Related articles: