json2.js 入門(mén)教程之使用方法與實(shí)例分析
json2.js主要功能是做什么的？
json2.js提供了json的序列化和反序列化方法，可以將一個(gè)json對(duì)象轉(zhuǎn)換成json字符串，也可以將一個(gè)json字符串轉(zhuǎn)換成一個(gè)json對(duì)象。
json2.js在瀏覽器不支持json.parse的內(nèi)置方法時(shí)，最有效。json2.js會(huì)創(chuàng)建一個(gè)內(nèi)部的全局變量，提供json對(duì)象與字符串之間的轉(zhuǎn)換。
由于eval已經(jīng)不提倡使用了，并存在一定的危險(xiǎn)，建議使用內(nèi)置parse json的方法，或者直接使用json2.js。
json2.js的源碼地址：
https://github.com/douglascrockford/JSON-js
Visual Studio用戶可以直接通過(guò)Nuget來(lái)獲得。
使用方法很簡(jiǎn)單：
1、引用json2.js：
<script type="text/javascript" src="/CoreResource/JS/json2.min.js"></script>
2、JSON.stringify() 序列化方法
方法用于將javaScript 的json數(shù)據(jù)轉(zhuǎn)化為json格式的文本串。主要用于向服務(wù)端返回?cái)?shù)據(jù)。
var jsonObj = { "id": "01", "name": "Tom" };
JSON.stringify(jsonObj);
3、JSON.parse()反序列化方法
var jsonString = {"id": "01", "name": "Tom" };
JSON.parse(jsonString);
用于將json格式的文本串轉(zhuǎn)化為javaScript 的json數(shù)據(jù)，例如:
var records =
{
"table": "GPS_MANAGER",
"token": "32sdfj-349sfdnfs32-fsdf348imfg323-df34",
"pk": "GPS_LONGITUDE,GPS_LATITUDE",
"rows": [
{
"type": "modify",
"columns": [
{
"GPS_LONGITUDE": "GPS_LONGITUDE",
"old": "",
"new": "112.9152287"
},
{
"GPS_LATITUDE": "GPS_LATITUDE",
"old": "",
"new": "22.6689977"
},
{
"GPSMARK": "GPSMARK",
"old": "",
"new": "1"
},
{
"RTUNAME": "RTUNAME",
"old": "",
"new": "大邊巖站"
},
{
"RTUID": "RTUID",
"old": "",
"new": "13525"
},
{
"NOTE": "NOTE",
"old": "",
"new": "undefined"
},
{
"Y": "Y",
"old": "",
"new": "2508146.500000"
},
{
"X": "X",
"old": "",
"new": "696776.812500"
},
{
"GPS_HEIGHT": "GPS_HEIGHT",
"old": "",
"new": "0"
},
{
"GPS_GUID": "GPS_GUID",
"old": "",
"new": "1381c526-2d90-442f-889c-731485a960c1"
}
]
}
]
}
var jsonObj = JSON.parse(records );
然后就可以通過(guò)前端javascript代碼解析json文本傳遞過(guò)來(lái)的數(shù)據(jù)，json是一種以key:value的復(fù)合格式存儲(chǔ)數(shù)據(jù)的協(xié)議，這樣簡(jiǎn)化了數(shù)據(jù)傳遞量，比較xml更能減輕客戶端負(fù)載。
但是個(gè)人感覺(jué)json數(shù)據(jù)格式?jīng)]有xml文件那樣一目了然！
3. Json驗(yàn)證工具
(1). Json文本在線驗(yàn)證工具JSONLint：http://jsonlint.com/
通過(guò)此在線工具驗(yàn)證json格式文本串是否符合json數(shù)據(jù)格式。
Json格式查看器json viewer 1.1 漢化中文綠色版
下面是其他網(wǎng)友的補(bǔ)充
需要加載json2.js
這是個(gè)人在最近使用json時(shí)做的總結(jié)，拿出來(lái)給沒(méi)接觸過(guò)的小弟們曬曬，適用與沒(méi)接觸過(guò)json的人員，其中json2。js請(qǐng)到j(luò)son官網(wǎng)下載。
<script>
//直接聲明json數(shù)據(jù)結(jié)構(gòu)
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
//聲明字符串,可對(duì)比一下json文本與我們正常文本的區(qū)別
var normalstring='[{persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]}]';
var jsontext='[{"persons":[{"name":"jordan","sex":"m","age":"40"}, {"name":"bryant","sex":"m","age":"28"}, {"name":"McGrady","sex":"m","age":"27"} ]}]';
//調(diào)用eval函數(shù)轉(zhuǎn)換為json對(duì)象，
var myE = eval(normalstring);
document.writeln(myE '<br><br>');
//將json對(duì)象轉(zhuǎn)換為字符串
var text = JSON.stringify(myE);
//對(duì)比轉(zhuǎn)換后的json文本與聲明的文本區(qū)別
document.writeln('轉(zhuǎn)換后的json文本：' text '<br><br>聲明的json格式文本' jsontext '<br><br>聲明的普通格式文本' normalstring '<br><br>');
//當(dāng)安全比較重要的時(shí)候使用JSON解析就好一些。JSON解析只會(huì)識(shí)別JSON文本并且它更安全,下面調(diào)用json的parse函數(shù)對(duì)文本數(shù)據(jù)轉(zhuǎn)換生成json數(shù)據(jù)結(jié)構(gòu)
var myData = JSON.parse(jsontext);
document.writeln(myData '<br><br>');
//下面是對(duì)json對(duì)象的增刪查改操作
//聲明json對(duì)象
var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]};
var persons=jsonObj2.persons;
var str="";
var person={name:"yaoMing",sex:"m",age:"26"};
//以下為json對(duì)象的操作，去掉注釋可以查看操作結(jié)果
//jsonObj2.persons.push(person);//數(shù)組最后加一條記錄
//jsonObj2.persons.pop();//刪除最后一項(xiàng)
//jsonObj2.persons.shift();//刪除第一項(xiàng)
jsonObj2.persons.unshift(person);//數(shù)組最前面加一條記錄 只要適合Javascript的方法都是可以用在JSON對(duì)象的數(shù)組中的！所以還有另外的方法splice( )進(jìn)行crud操作！ //刪除
//jsonObj2.persons.splice(0,2);//開(kāi)始位置,刪除個(gè)數(shù)
//替換不刪除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother,self);//開(kāi)始位置,刪除個(gè)數(shù),插入對(duì)象
//替換并刪除
//jsonObj2.persons.splice(0,1,self,brother);//開(kāi)始位置,刪除個(gè)數(shù),插入對(duì)象
for(var i=0;i<persons.length;i ){ var cur_person=persons[i]; str =cur_person.name "'sex is " cur_person.sex " and age is " cur_person.age "<br><br>"; }
document.writeln(str);
//轉(zhuǎn)換為json文本
var myjsonobj = JSON.stringify(jsonObj2);
document.writeln(myjsonobj);
</script>
3、增強(qiáng)功能：
比如說(shuō)，我們的數(shù)據(jù)非常復(fù)雜，還有類(lèi)似頭像，昵稱(chēng)，個(gè)人簽名之類(lèi)的信息。
可是我保存在本地，只需要用戶名，和性別，腫么破呢？
也許你會(huì)說(shuō) so easy, 遍歷數(shù)據(jù)重新提取下即可。
例如：
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; ( i=, new_data=[]; i<data.length; i++) {
new_data.push({
name: data[i].name,
sex: data[i].sex
});
} str_json = .stringify(new_data);
console.log(str_json);
var data = [
{name: "王尼瑪", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大錘", sex:1, age: 30}
];
for (var i=0, new_data=[]; i<data.length; i++) {
new_data.push({
name: data[i].name,
sex: data[i].sex
});
}
var str_json = JSON.stringify(new_data);
console.log(str_json);
確實(shí)分分鐘搞定。
其實(shí)我們只需要用 stringify 第二個(gè)參數(shù)即可簡(jiǎn)單處理這種問(wèn)題。
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; str_json = .stringify(data, [, ]);
console.log(str_json);
var data = [
{name: "王尼瑪", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大錘", sex:1, age: 30}
];
var str_json = JSON.stringify(data, ["name", "sex"]);
console.log(str_json);
第二個(gè)參數(shù)只要傳入需要的keys數(shù)組，就非常輕松的就完成這種處理了。
當(dāng)然如果我們要更糾結(jié)的處理，比如要把 1,0 修改為男女，那么第二個(gè)參數(shù)可以用回調(diào)函數(shù)來(lái)處理。
data = [
{name: , sex:, age: },
{name: , sex:, age: },
{name: , sex:, age: }
]; str_json = .stringify(data,
(k === ) { [, ][v];
} v;
});
console.log(str_json);
var data = [
{name: "王尼瑪", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大錘", sex:1, age: 30}
];
var str_json = JSON.stringify(data, function (k, v) {
if (k === "sex") {
return ["女", "男"][v];
}
return v;
});
console.log(str_json);
第二個(gè)參數(shù)如此強(qiáng)悍，為我們省去了不少麻煩。
相關(guān)文章
今天小編就為大家分享一篇json字符串傳到前臺(tái)input的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
淺談JsonObject中的key-value數(shù)據(jù)解析排序問(wèn)題
下面小編就為大家分享一篇淺談JsonObject中的key-value數(shù)據(jù)解析排序問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
json2.js 入門(mén)教程之使用方法與實(shí)例分析
這篇文章主要介紹了json2.js 入門(mén)教程之使用方法與實(shí)例分析,需要的朋友可以參考下2017-09-09
json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法
今天小編就為大家分享一篇json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JS解析后臺(tái)返回的JSON格式數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇JS解析后臺(tái)返回的JSON格式數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js解析與序列化json數(shù)據(jù)(二)序列化探討
上一節(jié)我們講解了JSON.stringify()的基本用法，這一節(jié)我們來(lái)重點(diǎn)探討一下序列化,單獨(dú)或組合使用這兩個(gè)參數(shù)(過(guò)濾器/數(shù)組)，可以更全面深入地控制JSON的序列化,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)json有所幫助2013-02-02
Json對(duì)象替換字符串占位符實(shí)現(xiàn)代碼
實(shí)現(xiàn)根據(jù)提供的Json對(duì)象去替換字符串中相應(yīng)的占位符。需要的朋友可以參考下。2010-11-11
打印json對(duì)象的內(nèi)容及JSON.stringify函數(shù)應(yīng)用
json對(duì)象的內(nèi)容在調(diào)試的時(shí)候用的到通過(guò)JSON.stringify函數(shù)，可以轉(zhuǎn)換json對(duì)象為字符串，接下來(lái)為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-03-03
JSON我就要來(lái)了2008-06-06
我們知道AJAX技術(shù)能夠使得每一次請(qǐng)求更加迅捷，對(duì)于每一次請(qǐng)求返回的不是整個(gè)頁(yè)面，也僅僅是所需要返回的數(shù)據(jù)。2008-06-06