網(wǎng)上有不少教程文章已介紹這方面的內(nèi)容，但費(fèi)了許久才找到我需要的東西，將demo貼在此處，以作記錄。
json-demo.html:
- <!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(){
- // 簡(jiǎn)單字符串轉(zhuǎn)換為json對(duì)象
- var str = '{ "label": "aa", "value": "bb" }';
- var obj = JSON.parse(str);
- show(obj.label);
- // 較復(fù)雜的json字符串書寫格式
- var str2 = '{' +
- '"chart":{' +
- '"xAxisName":"dd",' +
- '"yAxisName":"ee"' +
- '},"data":[]' +
- '}';
- var obj2 = JSON.parse(str2);
- // 查找json對(duì)象
- show(obj2.chart.xAxisName);
- // 修改json對(duì)象
- obj2.chart.xAxisName = "dddd";
- show(obj2.chart.xAxisName);
- // 刪除json對(duì)象
- delete obj2.chart.xAxisName;
- show(obj2.chart.xAxisName);
- var elemSet;
- // js操作json對(duì)象
- for(var i=0; i<2 ;i++){
- elemSet = {"label":i*2,"value":i*10,"color":"76A5DB"};
- // 增加json對(duì)象中的data集合元素
- obj2.data.push(elemSet);
- }
- show(obj2.data[0].label+','+obj2.data[0].value+','+'obj2.data[0].color');
- // 將json對(duì)象轉(zhuǎn)換為字符串
- show(JSON.stringify(obj2));
- }
- function show(text){
- var input = $('#textarea1').val();
- input += '---' + text + '\n';
- $('#textarea1').val(input);
- }
- -->
- </script>
- </html>
<!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(){
// 簡(jiǎn)單字符串轉(zhuǎn)換為json對(duì)象
var str = '{ "label": "aa", "value": "bb" }';
var obj = JSON.parse(str);
show(obj.label);
// 較復(fù)雜的json字符串書寫格式
var str2 = '{' +
'"chart":{' +
'"xAxisName":"dd",' +
'"yAxisName":"ee"' +
'},"data":[]' +
'}';
var obj2 = JSON.parse(str2);
// 查找json對(duì)象
show(obj2.chart.xAxisName);
// 修改json對(duì)象
obj2.chart.xAxisName = "dddd";
show(obj2.chart.xAxisName);
// 刪除json對(duì)象
delete obj2.chart.xAxisName;
show(obj2.chart.xAxisName);
var elemSet;
// js操作json對(duì)象
for(var i=0; i<2 ;i++){
elemSet = {"label":i*2,"value":i*10,"color":"76A5DB"};
// 增加json對(duì)象中的data集合元素
obj2.data.push(elemSet);
}
show(obj2.data[0].label+','+obj2.data[0].value+','+'obj2.data[0].color');
// 將json對(duì)象轉(zhuǎn)換為字符串
show(JSON.stringify(obj2));
}
function show(text){
var input = $('#textarea1').val();
input += '---' + text + '\n';
$('#textarea1').val(input);
}
-->
</script>
</html>
注：依賴jquery.js和json2.js。
運(yùn)行效果：
---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"}]}
該文章在 2015/4/26 10:28:47 編輯過
400 186 1886
