首頁 > web前端 > js教程 > Json物件和字串互相轉換json資料拼接和JSON使用方式詳細介紹(小結)

Json物件和字串互相轉換json資料拼接和JSON使用方式詳細介紹(小結)

高洛峰
發布: 2017-01-09 14:51:58
原創
1651 人瀏覽過

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

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

一、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 +

然後,就可以這樣讀取: alert(obj.name +

然後,就可以這樣讀取: alert(obj.name +

然後,就可以這樣讀取: alert(obj.name +

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


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

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

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

二、JSON物件轉換為JSON字串: obj.toJSONString()或全域方法JS​​ON.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.length; i++){
for(var j = 0; j<arr2.length; j++){
var str=&#39;<div style="display:block">&#39;+
&#39;<div>姓名:&#39;+arr1[i].name+&#39; 性别:&#39;+arr1[i].sex+&#39;</div>&#39;+
&#39;<div>学校:&#39;+arr2[j].name+&#39;</div>&#39;+
&#39;<div>地点:&#39;+arr2[j].area+&#39;</div>&#39;+
//&#39;<div>喜好:&#39;+arr1[i].like+&#39;</div>&#39;+ //全显示
//&#39;<div>喜好:&#39;+arr1[i].like[1]+&#39;</div>&#39;+ //单独设置
//&#39;<div>喜好:&#39;+arr1[i].like[0]+&#39;</div>&#39;+
&#39;</div>&#39;;
}
$(".result").append(str);
}
//分层显示
//var str = "";
// var str1 = "";
// if (arr1 != null) {
// for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值
// str += "<span>" + arr1[i].name + "</span><span>" + arr1[i].sex + "</span><br>";
// }
// $(".result").html(str);
// }
// if (arr2 != null) {
// for (var j = 0; j < arr2.length; j++) {
// str1 += "<span>" + arr2[j].name + "</span><span>" + arr2[j].area+ "</span><br>";
// }
// $(".result2").html(str1);
// }
},
error:function(data){
alert("error");
}
})
<div class="result">frist:</div>
<div class="result2">second:</div>
for
登入後複製

html和ajax程式碼


1、用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=&#39;<div style="display:block">&#39;+
&#39;<div>姓名:&#39;+item.name+&#39; 性别:&#39;+item.sex+&#39;</div>&#39;+
&#39;<div>like:&#39;+item.like+&#39;</div>&#39;+
&#39;</div>&#39;;
$(".result").append(str);
})
},
error:function(data){
alert("error");
}
})
<div class="result"></div>
each
登入後複製

   

2、each循環使用$.each53方法中返回的資料庫傳回中插入的資料.

//json对象:
var jsonObj= {
"name":" 张三",
"sex":"男",
"age":26,
};
使用: jsonObj.name= "张三"
jsonObj.age= "26"
//json数组: []下标 从 0 开始
var jsonArr =[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
]
使用: jsonArr[0].sex="男"
jsonArr[1].name="李四"
//多个数组: []下标 从 0 开始
var options = {
"city" :[
{
"name":"上海",
"area":"普陀区",
"option":"真北路",
"correct":"1"
},
{
"name":"石家庄",
"area":"河北",
"option":"在北方",
"correct":"2"
}],
"world":[
{
"title":"美国",
"content":"好莱坞大片 科幻"
},
{
"title":"中国",
"content":"爱我中华,虽远必诛"
}
]
};
options.city[0].area="普陀区"
options.world[1].content="爱我中华,虽远必诛
登入後複製

   

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

JSON 資料使用方法:

以上所述是小編給大家介紹的Json物件和字串互相轉換json資料拼接和JSON使用方式詳細介紹(小結),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持!

更多Json物件和字串互相轉換json資料拼接和JSON使用方式詳細介紹(小結)相關文章請關注PHP中文網!


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板