Json物件和字串互相轉換json資料拼接和JSON使用方式詳細介紹-js教程-PHP中文網

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文字格式，但也使用了類似C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的資料交換語言。易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。

一、JSON字串轉換為JSON物件： eval() 和JSON.parse

eg- json字串:

var data = '{ "name": "dran", "sex": "man" }'; var obj = eval("("+data+")"); 或者 var obj = JSON.parse(data)；

登入後複製

然後，就可以這樣讀取： alert(obj.name +

然後，就可以這樣讀取： alert(obj.name + s sex);

提示：為什麼要eval這裡要加("("+data+")");呢？

　　原因在於：eval本身的問題。由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。

加上圓括號的目的是迫使eval函數在處理JavaScript程式碼的時候強制將括號內的表達式（expression）轉換為對象，而不是作為語句（statement）來執行。舉一個例子，例如物件字面量{}，如若不加外層的括號，那麼eval會將大括號識別為JavaScript程式碼區塊的開始和結束標記，那麼{}將會被認為是執行了一句空語句

二、JSON物件轉換為JSON字串： obj.toJSONString()或全域方法JSON.stringify(obj) (obj代表json物件)

eg-json对象: var obj = { "name": "dran", "sex": "man" }; var jstring = JSON.stringify(obj) ;// 建议用这个 var jstring = obj.toJSONString(); //toJSONString()不是js原生的方法，需要引入相应的库或自己定义后才能用 (不习惯用)

登入後複製

);

注意：

目前，Firefox、Opera、IE8以上版本也提供了本地JSON支援。其中，JSON解釋器提供的函數有：JSON.parse、JSON.stringify。　　對於那些不提供本地JSON支援的瀏覽器可以引入腳本json2.js，來實作JSON轉換功能。 json2.js腳本可到https://github.com/douglascrockford/JSON-js/blob/master/json2.js頁面下載

在AJAX實現前後台資料互動的時候，通常使用JSON的資料格式，對於JSON來說，有嚴格的程式碼規範，一旦格式出問題，就無法顯示出相應效果，同時還不在控制台報錯

補充： ajax讀取json資料拼接顯示：

json檔案：

{ "first":[ {"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"}, ], "second":[ {"name":"上海大学","area":"上海"}, {"name":"武汉大学","area":"武汉"}, {"name":"北京大学","area":"北京"}, {"name":"山东大学","area":"山东"}, ] }

登入後複製

$.ajax({ url : "ceshi.json", type : "POST", dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text， 因为测试， json文件格式正确书写 success: function(data) { var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象 var arr1 = dataJson.first; var arr2 = dataJson.second; //一栏显示 用for循环完成数组解析 for(var i = 0; i'+ '姓名：'+arr1[i].name+' 性别：'+arr1[i].sex+'
'+ '学校:'+arr2[j].name+'
'+ '地点:'+arr2[j].area+'
'+ //'喜好:'+arr1[i].like+'
'+ //全显示 //'喜好:'+arr1[i].like[1]+'
'+ //单独设置 //'喜好:'+arr1[i].like[0]+'
'+ '

'; } $(".result").append(str); } //分层显示 //var str = ""; // var str1 = ""; // if (arr1 != null) { // for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值 // str += "" + arr1[i].name + "" + arr1[i].sex + "
"; // } // $(".result").html(str); // } // if (arr2 != null) { // for (var j = 0; j < arr2.length; j++) { // str1 += "" + arr2[j].name + "" + arr2[j].area+ "
"; // } // $(".result2").html(str1); // } }, error:function(data){ alert("error"); } })

frist:

second:

for

登入後複製

[ {"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"}, ] $.ajax({ url : "ceshi.json", type : "POST", dataType :"text", //浏览器把json文件当作文本文件不然读取不出来权宜之策就改成了text，因为测试， json文件格式正确书写 success: function(data) { var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象 //each循环使用$.each方法遍历返回的数据date,插入到class为 .result中 i 表示索引 item 信息值对象 $.each(dataJson,function(i,item){ var str='

'+ '

姓名：'+item.name+' 性别：'+item.sex+'

'+ '

like:'+item.like+'

'+ '

'; $(".result").append(str); }) }, error:function(data){ alert("error"); } })

each

PS:對於一般的js產生json對象，只需要將$.each()方法替換為for語句即可，其他不變