Explication détaillée de l'analyse jQuery Json examples_jquery

L'exemple de cet article décrit comment jQuery analyse Json. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Avant-propos

Dans le processus de transmission de données WEB, json est transmis sous forme de texte, c'est-à-dire une forme légère de string , et le client utilise généralement JS pour opérer sur l'objet JSON reçu, la clé est donc la conversion entre les objets JSON et les chaînes JSON et l'analyse des données JSON.

Clarifiez d'abord 2 concepts. Par exemple :

Chaîne JSON :

Copier le code Le code est tel que suit :

var str1 = '{ "name": "deyuyi", "sex": "man" }';

Objet JSON :

Copier le code Le code est le suivant :

var str2 = { "name": "deluyi", "sex": "man" };

Cela peut être facilement compris comme ceci :

L'objet JSON est un format qui peut être directement exploité par JQuery, tout comme en C# vous pouvez utiliser un objet (nom de classe) pour signaler des attributs ( méthodes);

La chaîne JSON est juste une chaîne, un tout. Sans interception, il n'y a aucun moyen de récupérer les données qui y sont stockées, sauf si vous souhaitez simplement l'alerter (); 🎜>

1. Convertir la chaîne JSON en objet JSON

Pour utiliser le str1 ci-dessus, vous devez d'abord utiliser la méthode suivante pour la convertir en objet JSON :

A : fonction eval

La fonction eval peut convertir directement des chaînes essentiellement conformes ou approximativement conformes au format JSON en objets JSON, en utilisant des méthodes telles que :

eval('(' str ')'); //où str est la chaîne qui satisfait à la description de ce titre

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = eval('(' + str + ')'); 
alert( obj.name);
var str2="{ 'name': 'John' }";
var obj2 = eval('(' + str2 + ')'); 
alert( obj2.name);
var str3="{ name: 'John' }";
var obj3 = eval('(' + str3 + ')'); 
alert( obj3.name);

Ce qui précède affichera le résultat "john".

La méthode Eval peut convertir les chaînes de format standard et non standard suivantes :

var str="{ 'name': 'John' }";
var str2='{ "name": "John" }';
var str3="{ name: 'John' }";

Voir cet exemple télécharger Dans le package : JqueryDemo1.html

B : fonction parseJSON

Une autre fonction qui convertit les chaînes standard en objets JSON est parseJSON(), utilisée comme jQuery .parseJSON( str)//où str est la chaîne qui satisfait à la description de ce titre

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = jQuery.parseJSON(str)
alert("1"+ obj.name);

Les résultats ci-dessus seront affichés. " John".

Cette méthode ne prend en charge que le format standard : var str='{ "name": "John" }';

Voir le package de téléchargement pour cet exemple : JqueryDemo2.html

C : Fonction JSON.parse

Il existe également une fonction qui convertit les chaînes standard en objets JSON est JSON.parse(), qui peut être utilisée comme JSON.parse(str) // Où str est la chaîne qui satisfait à la description de ce titre

var str = '{ "name": "mady", "age": "24" }';
var obj = JSON.parse(str);
alert(obj.name);

Tout ce qui précède produira le résultat " John".

Cette méthode ne prend en charge que le format standard : var str='{ "name": "John" }';

Voir le package de téléchargement pour cet exemple : JqueryDemo3.html

Les résultats ci-dessus sont cohérents et tous les noms sont affichés, comme indiqué ci-dessous :

Remarque spéciale : si obj est à l'origine un objet JSON, utilisez l'eval () Après la conversion (même plusieurs conversions), il s'agit toujours d'un objet JSON, mais il y aura des problèmes (lancement d'une exception de syntaxe) après avoir utilisé la fonction parseJSON().

D : Autre méthode

Si vous ne pouvez pas vous empêcher de vouloir faire une erreur, vous voulez vraiment analyser des chaînes non standard et irrégulières, telles que :

Copier le code Le code est le suivant :

ou

{name:mady,age:23}

Copier le code Le code est le suivant :

et d'autres formats illégaux essentiellement corrects auxquels vous pouvez penser, alors il existe des bibliothèques d'extensions qui peuvent le résoudre

{name:'mady',age:23}

jquery-json La bibliothèque d'extensions

L'adresse de téléchargement est ici :

http://code.google.com/p/jquery-json/

Cette bibliothèque est utilisée pour étendre jQuery, pour l'utilisation de JSON, deux fonctions ont été étendues : toJSON et parseJSON

la fonction toJSON est utilisée pour sérialiser un objet JavaScript ordinaire en JSON objet.

La fonction parseJSON est également utilisée pour sérialiser un objet JavaScript ordinaire en un objet JSON.

var data=$.toJSON({ x: 2, y: 3 }); 
var obj = jQuery.parseJSON(data); 
alert(obj.x); 
var str = {plugin: 'jquery-json', version: 2.3}; 
var data2=$.toJSON(str); 
var obj2 = jQuery.parseJSON(data2); 
alert(obj2.plugin);

Le résultat de l'exécution du code ci-dessus est le suivant :

Voir le package de téléchargement pour cet exemple : JqueryDemo5.html

2 Convertissez l'objet JSON en chaîne

Vous pouvez utiliser toJSONString(). ou la méthode globale JSON.stringify( ) Convertit les objets JSON en chaînes JSON.

Par exemple :

Copiez le code Le code est le suivant :

ou

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);

三、解析读取JSON

我们通过各种方式将字符串转换为JSON对象后就是解析他了。
如上面的例子：

复制代码 代码如下:

var str2 = { "name": "mady", "sex": "man" };

就可以这样读取：

复制代码 代码如下:

alert(str2.name);//和C#一样直接往出点…

弹出” mady”。
我们遇到的JSON很少有这么简单的，比如复杂一点的JSON对象如：

复制代码 代码如下:

var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"mady"}};

解析用：

      alert(str.GetUserPostByIdResult.Name);//一次点不出来，我多点几次

再再复杂一点的如：

复制代码 代码如下:

var data=" { root: [ {'name':'6200','value':'0'}, {'name':'6101','value':'xa'}, 
{'name':'6102','value':'beijing'}, {'name':'6103','value':'haerbin'}]}";

如果你想单挑的话，解析用：

复制代码 代码如下:

alert(dataObj.root[0].name);

弹出：“6200”。

如果你想群挑的话，解析用：

$.each(dataObj.root, function(index, item) {
  $("#info").append(
      "" +index+":"+ item.name + "" + 
      "" +index+":"+ item.value + "");
});

其中这个“#info”是个DIV的ID。输入结果如下图：

 

参见本例下载包中：JqueryDemo4.html

注意：本例如果要使用其他转换函数请更改字符串内单引号为双引号，外引号为单引号。
本文完整实例代码代码点击此处本站下载。

以上就是jQuery解析Json实例详解_jquery的内容，更多相关内容请关注PHP中文网（www.php.cn）！