Explication détaillée des étapes pour convertir les objets et les chaînes Json entre eux

Cette fois, je vais vous donner une explication détaillée des étapes de conversion des objets et des chaînes Json entre eux. Quelles sont les précautions pour convertir les objets et les chaînes Json entre eux. cas, jetons un coup d'oeil.

JSON (JavaScript Object Notation) est un format d'échange de données léger. 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- json string :

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 ? Du drap 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, prenez l'objet littéral {}. Si aucun crochet extérieur n'est ajouté, 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 fournissent également un support JSON local. 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 implémente le front-end et l'interaction des données back-end, utilisant généralement le format de données JSON. Pour JSON, il existe des spécifications de code strictes. Une fois qu'il y a un problème avec le format, l'effet correspondant ne peut pas être affiché et aucune erreur n'est affichée. signalé dans la console

Supplément : ajax lit l'affichage de l'épissage des données json :

fichier json :

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

html et le code ajax

1. Utiliser 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;<p style="display:block">'+
'<p>姓名：'+arr1[i].name+' 性别：'+arr1[i].sex+'</p>'+
'<p>学校:'+arr2[j].name+'</p>'+
'<p>地点:'+arr2[j].area+'</p>'+
//'<p>喜好:'+arr1[i].like+'</p>'+ //全显示
//'<p>喜好:'+arr1[i].like[1]+'</p>'+ //单独设置
//'<p>喜好:'+arr1[i].like[0]+'</p>'+
'</p>';
}
$(".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"); 
}
})
<p class="result">frist:</p>
<p class="result2">second:</p>
for

2 Chaque boucle utilise la méthode $.each pour parcourir la date des données renvoyées et l'insérer. 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='<p style="display:block">'+
'<p>姓名：'+item.name+' 性别：'+item.sex+'</p>'+
'<p>like:'+item.like+'</p>'+
'</p>'; 
$(".result").append(str); 
})
},
error:function(data){
alert("error"); 
}
})
<p class="result"></p>
each

PS : pour que js général génère des objets json, il vous suffit de remplacer la méthode $.each() par une instruction for , et les autres restent inchangés

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des techniques d'utilisation de JSON dans JS

Résumé de la méthode json de l'opération jQuery

Explication détaillée de l'analyse par Jquery des méthodes de chaîne Json et de tableau Json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!