Konvertieren Sie JSON-Objekte und -Strings ineinander. Detaillierte Einführung in das Spleißen von JSON-Daten und die Verwendung von JSON.

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)；

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原生的方法，需要引入相应的库或自己定义后才能用 (不习惯用)

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. Gespleißte Anzeige:

JSON-Datei:

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

HTML- und Ajax-Code

1. Verwenden Sie die for-Schleife

$.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

2. Jede Schleife verwendet die Methode $.each, um das zurückgegebene Datendatum zu durchlaufen und einzufügen in die Klasse .result

JSON:

[
{"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

PS: Für allgemeine js zum Generieren von JSON-Objekten benötigen Sie nur um die Methode $.each() durch eine for-Anweisung zu ersetzen.

JSON-Datennutzung:

//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="爱我中华，虽远必诛