Convertissez les objets et les chaînes Json entre eux. Introduction détaillée à l'épissage des données JSON et à l'utilisation de JSON (résumé).

JSON (JavaScript Object Notation) est un format léger d'échange de données. Il est basé sur un sous-ensemble d'ECMAScript. JSON utilise un format de texte totalement indépendant du langage, mais utilise également des conventions similaires à la famille des langages C (notamment C, C, C#, Java, JavaScript, Perl, Python, etc.). Ces propriétés font de JSON un langage d'échange de données idéal. Il est facile à lire et à écrire pour les humains, et il est également facile à analyser et à générer pour les machines (généralement utilisé pour augmenter les taux de transmission du réseau).

1. Convertir la chaîne JSON en objet JSON : eval() et JSON.parse

eg- chaîne json :

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

Ensuite, vous pouvez le lire comme ceci : alert(obj.name obj.sex);

Conseil : Pourquoi devez-vous ajouter ("(" data ")") à eval ici ? ;Tissu de laine ?

La raison réside dans : le problème de l'évaluation elle-même. Puisque json commence et se termine par "{}", il sera traité comme un bloc d'instructions dans JS, il doit donc être forcé pour être converti en expression.

Le but de l'ajout de parenthèses est de forcer la fonction eval à convertir l'expression entre parenthèses en objet lors du traitement du code JavaScript, plutôt que de l'exécuter en tant qu'instruction. Par exemple, si le littéral d'objet {} n'est pas ajouté avec des crochets extérieurs, alors eval reconnaîtra les accolades comme marques de début et de fin du bloc de code JavaScript, et {} sera considéré comme exécutant une instruction vide

2. Convertir l'objet JSON en chaîne JSON : obj.toJSONString() ou méthode globale JSON.stringify(obj) (obj représente l'objet json)

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

Ensuite, vous pouvez le lire comme ceci : alert(jstring);

Remarque :

Actuellement, Firefox, Opera, IE8 et supérieur sont également disponibles Ajout du JSON natif soutien. Parmi elles, les fonctions fournies par l'interpréteur JSON sont : JSON.parse, JSON.stringify. Pour les navigateurs qui ne fournissent pas de support JSON natif, le script json2.js peut être introduit pour implémenter la fonction de conversion JSON. Le script json2.js peut être téléchargé depuis la page https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Quand AJAX réalise le front-end et le back- mettre fin à l'interaction des données, il est généralement utilisé. Le format de données JSON a des spécifications de code strictes pour JSON. Une fois qu'il y a un problème avec le format, l'effet correspondant ne peut pas être affiché et une erreur n'est pas signalée sur la console

Supplémentaire : ajax lit les données json Affichage épissé :

fichier json :

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

html et code ajax

1, utilisez la boucle for

$.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. Chaque boucle utilise la méthode $.each pour parcourir le retour data date et insérez-le dans la classe .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 : Pour que les js généraux génèrent des objets json , il vous suffit de remplacer la méthode $.each() par L'instruction for est suffisante, et les autres restent inchangées

Méthode d'utilisation des données JSON :

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

Ce qui précède est donné par l'éditeur. La conversion d'objets et de chaînes Json que vous avez introduite, l'épissage des données json et l'utilisation de JSON sont présentés en détail (résumé) . Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'informations sur la conversion d'objets et de chaînes Json entre eux, l'épissage des données JSON et comment utiliser JSON (résumé), veuillez faire attention au site Web PHP chinois pour les articles connexes !