Json對(duì)象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細(xì)介紹(小結(jié))
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript的一個(gè)子集。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式,但是也使用了類似于C語(yǔ)言家族的習(xí)慣(包括C、C++、C#、Java、JavaScript、Perl、Python等)。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。 易于人閱讀和編寫,同時(shí)也易于機(jī)器解析和生成(一般用于提升網(wǎng)絡(luò)傳輸速率)。
一、JSON字符串轉(zhuǎn)換為JSON對(duì)象: eval() 和 JSON.parse
eg- json字符串:
var data = '{ "name": "dran", "sex": "man" }'; var obj = eval("("+data+")"); 或者 var obj = JSON.parse(data);
然后,就可以這樣讀?。?alert(obj.name + obj.sex);
提示:為什么要 eval這里要添加 ("("+data+")");呢?
原因在于:eval本身的問(wèn)題。 由于json是以”{}”的方式來(lái)開始以及結(jié)束的,在JS中,它會(huì)被當(dāng)成一個(gè)語(yǔ)句塊來(lái)處理,所以必須強(qiáng)制性的將它轉(zhuǎn)換成一種表達(dá)式。
加上圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式(expression)轉(zhuǎn)化為對(duì)象,而不是作為語(yǔ)句(statement)來(lái)執(zhí)行。舉一個(gè)例子,例如對(duì)象字面量{},如若不加外層的括號(hào),那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開始和結(jié)束標(biāo)記,那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語(yǔ)句
二、JSON對(duì)象轉(zhuǎn)換為JSON字符串 : obj.toJSONString()或者全局方法JSON.stringify(obj) (obj代表json對(duì)象)
eg-json對(duì)象: var obj = { "name": "dran", "sex": "man" }; var jstring = JSON.stringify(obj) ;// 建議用這個(gè) var jstring = obj.toJSONString(); //toJSONString()不是js原生的方法,需要引入相應(yīng)的庫(kù)或自己定義后才能用 (不習(xí)慣用)
然后,就可以這樣讀?。?alert(jstring);
注意:
目前,F(xiàn)irefox、Opera、IE8以上版本也提供了本地JSON支持。其中,JSON解釋器提供的函數(shù)有:JSON.parse、JSON.stringify。 對(duì)于那些并不提供本地JSON支持的瀏覽器可以引入腳本json2.js,來(lái)實(shí)現(xiàn)JSON轉(zhuǎn)換功能。json2.js腳本可到https://github.com/douglascrockford/JSON-js/blob/master/json2.js頁(yè)面下載
在AJAX實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)交互的時(shí)候,通常使用JSON的數(shù)據(jù)格式,對(duì)于JSON來(lái)說(shuō),有嚴(yán)格的代碼規(guī)范,一旦格式出問(wèn)題,就無(wú)法顯示出相應(yīng)效果,同時(shí)還不在控制臺(tái)報(bào)錯(cuò)
補(bǔ)充: ajax讀取json數(shù)據(jù)拼接顯示:
json文件:
{ "first":[ {"name":"張三","sex":"男","like":["吃飯","睡覺","打豆豆"]}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"}, ], "second":[ {"name":"上海大學(xué)","area":"上海"}, {"name":"武漢大學(xué)","area":"武漢"}, {"name":"北京大學(xué)","area":"北京"}, {"name":"山東大學(xué)","area":"山東"}, ] }
html和ajax代碼
1、用for循環(huán)
$.ajax({ url : "ceshi.json", type : "POST", dataType :"text", //瀏覽器把json文件當(dāng)作文本文件 不然讀取不出來(lái) 權(quán)宜之策就改成了text, 因?yàn)闇y(cè)試, json文件格式正確書寫 success: function(data) { var dataJson = eval("("+data+")"); // 將json字符串?dāng)?shù)據(jù)解析成對(duì)象 var arr1 = dataJson.first; var arr2 = dataJson.second; //一欄顯示 用for循環(huán)完成數(shù)組解析 for(var i = 0; i<arr1.length; i++){ for(var j = 0; j<arr2.length; j++){ var str='<div style="display:block">'+ '<div>姓名:'+arr1[i].name+' 性別:'+arr1[i].sex+'</div>'+ '<div>學(xué)校:'+arr2[j].name+'</div>'+ '<div>地點(diǎn):'+arr2[j].area+'</div>'+ //'<div>喜好:'+arr1[i].like+'</div>'+ //全顯示 //'<div>喜好:'+arr1[i].like[1]+'</div>'+ //單獨(dú)設(shè)置 //'<div>喜好:'+arr1[i].like[0]+'</div>'+ '</div>'; } $(".result").append(str); } //分層顯示 //var str = ""; // var str1 = ""; // if (arr1 != null) { // for (var i = 0; i < arr1.length; i++) { //這里面都是創(chuàng)建并賦值 // 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
2、 each循環(huán) 使用$.each方法遍歷返回的數(shù)據(jù)date,插入到class為 .result中
JSON:
[ {"name":"張三","sex":"男","like":["吃飯","睡覺","打豆豆"]}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"}, ] $.ajax({ url : "ceshi.json", type : "POST", dataType :"text", //瀏覽器把json文件當(dāng)作文本文件 不然讀取不出來(lái) 權(quán)宜之策就改成了text, 因?yàn)闇y(cè)試, json文件格式正確書寫 success: function(data) { var dataJson = eval("("+data+")"); // 將json字符串?dāng)?shù)據(jù)解析成對(duì)象 //each循環(huán) 使用$.each方法遍歷返回的數(shù)據(jù)date,插入到class為 .result中 i 表示索引 item 信息值 對(duì)象 $.each(dataJson,function(i,item){ var str='<div style="display:block">'+ '<div>姓名:'+item.name+' 性別:'+item.sex+'</div>'+ '<div>like:'+item.like+'</div>'+ '</div>'; $(".result").append(str); }) }, error:function(data){ alert("error"); } }) <div class="result"></div> each
PS:對(duì)于一般的js生成json對(duì)象,只需要將$.each()方法替換為for語(yǔ)句即可,其他不變
JSON 數(shù)據(jù)使用方法:
//json對(duì)象: var jsonObj= { "name":" 張三", "sex":"男", "age":26, }; 使用: jsonObj.name= "張三" jsonObj.age= "26" //json數(shù)組: []下標(biāo) 從 0 開始 var jsonArr =[ {"name":"張三","sex":"男","like":["吃飯","睡覺","打豆豆"]}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, ] 使用: jsonArr[0].sex="男" jsonArr[1].name="李四" //多個(gè)數(shù)組: []下標(biāo) 從 0 開始 var options = { "city" :[ { "name":"上海", "area":"普陀區(qū)", "option":"真北路", "correct":"1" }, { "name":"石家莊", "area":"河北", "option":"在北方", "correct":"2" }], "world":[ { "title":"美國(guó)", "content":"好萊塢大片 科幻" }, { "title":"中國(guó)", "content":"愛我中華,雖遠(yuǎn)必誅" } ] }; options.city[0].area="普陀區(qū)" options.world[1].content="愛我中華,雖遠(yuǎn)必誅
以上所述是小編給大家介紹的Json對(duì)象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細(xì)介紹(小結(jié)),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法
- JS對(duì)象與json字符串格式轉(zhuǎn)換實(shí)例
- 將JSON字符串轉(zhuǎn)換成Map對(duì)象的方法
- js中把JSON字符串轉(zhuǎn)換成JSON對(duì)象最好的方法
- JS對(duì)象與json字符串相互轉(zhuǎn)換實(shí)現(xiàn)方法示例
- JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
- js字符串轉(zhuǎn)json對(duì)象的四種實(shí)現(xiàn)方法
相關(guān)文章
JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
這兩天一直想實(shí)現(xiàn)這個(gè),以前做做個(gè)Demo,但是不知道跑哪去了。于是今天在網(wǎng)上找了些資料再自己動(dòng)手搞定。廢話不多說(shuō)。直接進(jìn)入主題啦。2010-04-04Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬
面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過(guò)對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬2022-10-10JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)圖片等比例縮放實(shí)現(xiàn)代碼及調(diào)用方式
為了保證圖片統(tǒng)一大小,直接設(shè)置圖片大小又會(huì)導(dǎo)致圖片拉伸,造成圖片模糊,接下來(lái)將介紹的代碼可以在圖片加載完成后自動(dòng)按比例調(diào)整圖片大小,感興趣的你可以參考下2013-02-02JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼
這篇文章介紹了js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼,有需要的朋友可以參考一下2013-11-11