Json objects and json strings. If you do not pay attention to them, obfuscation is easy to ignore. Examples of cases that are easy to mix
1. Put the variables in the input box in php and read the json string through js. To use the variable, convert the json field string to a json object.
2. ajax returns json data. If the dataType of the request is not set to json, the returned result is also a json string.
3. Use js to change the value of input. If a value is directly assigned to a json Object, the value displayed in the developer tool is as follows: [Object]
I. Differences between json strings and json objects
Var aa = '{"test": 1, "test1": 2 }';
Var bb = {"test": 1, "test1": 2 };
Console. log (bb); // The result is Object {test = 1, test1 = 2}
Console. log (aa); // The result is {"test": 1, "test1": 2}
The difference is that one is an object and the other is a string. Haha.
2. Convert a json string to a json object
Var obj = eval ('+ aa +'); // method 1
Var obj = JSON. parse (aa); // method 2
3. Convert a json object to a json string
Var last = JSON. stringify (obj );
The above conversion, I only loaded, jquery
Example
<! DOCTYPE html>
<Html>
<Head>
<Title> json-demo </title>
</Head>
<Body>
<Textarea id = "textarea1" value = "" style = "width: 500px; height: 300px;"> </textarea>
</Body>
<Script type = "text/javascript" src = "jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript" src = "json2.js"> </script>
<Script type = "text/javascript">
<! --
$ (Document). ready (function (){
Test1 ();
});
Function test1 (){
// Convert a simple string to a json object
Var str = '{"label": "aa", "value": "bb "}';
Var obj = JSON. parse (str );
Show (obj. label );
// Complicated json string writing format
Var str2 = '{' +
'"Chart": {' +
'"XAxisName": "dd",' +
'"YAxisName": "ee"' +
'}, "Data": []' +
'}';
Var obj2 = JSON. parse (str2 );
// Search for json objects
Show (obj2.chart. xAxisName );
// Modify the json object
Obj2.chart. xAxisName = "dddd ";
Show (obj2.chart. xAxisName );
// Delete a json object
Delete obj2.chart. xAxisName;
Show (obj2.chart. xAxisName );
Var elemSet;
// Js operation json object
For (var I = 0; I <2; I ++ ){
ElemSet = {"label": I * 2, "value": I * 10, "color": "76A5DB "};
// Add the data set element in the json object
Obj2.data. push (elemSet );
}
Show (obj2.data [0]. label + ',' + obj2.data [0]. value + ',' + 'obj2. data [0]. Color ');
// Convert a json object to a string
Show (JSON. stringify (obj2 ));
}
Function show (text ){
Var input = $ ('# textarea1'). val ();
Input + = '---' + text + '\ n ';
$ ('# Textarea1'). val (input );
}
-->
</Script>
</Html>
Note: dependent on jquery. js and json2.js.
Running effect:
--- Aa
--- Dd
--- Dddd
--- Undefined
--- 0, 0, obj2.data [0]. color
--- {"Chart": {"yAxisName": "ee"}, "data": [{"label": 0, "value": 0, "color ": "76A5DB" },{ "label": 2, "value": 10, "color": "76A5DB"}]}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
