Heim > Web-Frontend > js-Tutorial > Hauptteil

Konvertieren Sie JSON-Objekte und -Strings ineinander. Detaillierte Einführung in das JSON-Datenspleißen und die JSON-Nutzung (Zusammenfassung).

高洛峰
Freigeben: 2017-01-09 14:51:58
Original
1637 Leute haben es durchsucht

JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat. Es basiert auf einer Teilmenge von ECMAScript. JSON verwendet ein völlig sprachunabhängiges Textformat, verwendet aber auch Konventionen ähnlich der C-Sprachfamilie (einschließlich C, C++, C#, Java, JavaScript, Perl, Python usw.). Diese Eigenschaften machen JSON zu einer idealen Datenaustauschsprache. Es ist für Menschen leicht zu lesen und zu schreiben, und es ist auch für Maschinen leicht zu analysieren und zu generieren (wird im Allgemeinen zur Erhöhung der Netzwerkübertragungsraten verwendet).

1. JSON-String in JSON-Objekt konvertieren: eval() und JSON.parse

zB- JSON-String:

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

Dann können Sie es so lesen: warning(obj.name + obj.sex);

Tipp: Warum müssen Sie („(“+data+“) hinzufügen? eval hier? ");Wollstoff?

Der Grund liegt in: dem Problem der Bewertung selbst. Da JSON mit „{}“ beginnt und endet, wird es in JS als Anweisungsblock verarbeitet und muss daher zur Konvertierung in einen Ausdruck gezwungen werden.

Der Zweck des Hinzufügens von Klammern besteht darin, die Auswertungsfunktion zu zwingen, den Ausdruck in den Klammern bei der Verarbeitung von JavaScript-Code in ein Objekt umzuwandeln, anstatt ihn als Anweisung auszuführen. Nehmen Sie zum Beispiel das Objektliteral {}. Wenn keine äußeren Klammern hinzugefügt werden, erkennt eval die geschweiften Klammern als Start- und Endmarkierungen des JavaScript-Codeblocks und {} wird als eine leere Anweisung
betrachtet

2. JSON-Objekt in JSON-String konvertieren: obj.toJSONString() oder globale Methode JSON.stringify(obj) (obj stellt JSON-Objekt dar)

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

Dann können Sie es so lesen: warning(jstring);

Hinweis:

Derzeit sind auch Firefox, Opera, IE8 und höher verfügbar. Hinzugefügt native JSON-Unterstützung. Zu den vom JSON-Interpreter bereitgestellten Funktionen gehören unter anderem: JSON.parse, JSON.stringify. Für Browser, die keine native JSON-Unterstützung bieten, kann das Skript json2.js eingeführt werden, um die JSON-Konvertierungsfunktion zu implementieren. Das json2.js-Skript kann von der Seite https://github.com/douglascrockford/JSON-js/blob/master/json2.js heruntergeladen werden

Wenn AJAX Front-End und Back- realisiert Beenden Sie die Dateninteraktion, es wird normalerweise verwendet. Das Datenformat von JSON hat strenge Codespezifikationen für JSON. Sobald ein Problem mit dem Format auftritt, kann der entsprechende Effekt nicht angezeigt werden und es wird kein Fehler auf der Konsole gemeldet

Zusätzlich: Ajax liest JSON-Daten. Splicing-Anzeige:

JSON-Datei:

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

HTML- und Ajax-Code

1, for-Schleife verwenden

$.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
Nach dem Login kopieren

2. Jede Schleife verwendet die Methode $.each, um das zurückgegebene Datendatum zu durchlaufen und fügen Sie es in die Klasse .result ein Es muss nur die Methode $.each() durch die for-Anweisung ersetzt werden, die anderen bleiben unverändert

JSON-Datennutzungsmethode:

[
{"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
Nach dem Login kopieren

Das Obige wurde vom Herausgeber bereitgestellt. Das von Ihnen eingeführte JSON-Objekt und die JSON-Datenspleißung und die JSON-Verwendung werden ausführlich vorgestellt (Zusammenfassung). Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Informationen zum Konvertieren von Json-Objekten und -Strings ineinander, zum Spleißen von JSON-Daten und zur Verwendung von JSON (Zusammenfassung) finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

//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="爱我中华,虽远必诛
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage