Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erklärung der jQuery-Analyse von Json examples_jquery

PHP中文网
Freigeben: 2016-05-16 15:30:22
Original
1080 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery Json analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vorwort

Bei der WEB-Datenübertragung wird JSON in Textform übertragen. Das heißt, eine leichte Form von string. Der Client verwendet im Allgemeinen JS, um das empfangene JSON-Objekt zu bearbeiten. Der Schlüssel liegt also in der Konvertierung zwischen JSON-Objekten und JSON-Strings und der Analyse von JSON-Daten.

Erklären Sie zunächst zwei Konzepte. Zum Beispiel:

JSON-Zeichenfolge:

Code kopieren Der Code ist wie folgt folgt:

var str1 = '{ "name": "deyuyi", "sex": "man" }';
Nach dem Login kopieren

JSON-Objekt:

Code kopieren Der Code lautet wie folgt:

var str2 = { "name": "deluyi", "sex": "man" };
Nach dem Login kopieren

Es kann leicht so verstanden werden:

JSON-Objekt ist ein Format, das direkt von JQuery bedient werden kann, genau wie in C# können Sie ein Objekt (Klassenname) verwenden, um auf Attribute hinzuweisen ( Methoden);

JSON-String ist nur ein String, ein Ganzes. Ohne Abfangen gibt es keine Möglichkeit, die darin gespeicherten Daten direkt abzurufen 🎜>

1. JSON-String in JSON-Objekt konvertieren

Um den oben genannten str1 zu verwenden, müssen Sie ihn zuerst mit der folgenden Methode in ein JSON-Objekt konvertieren:

A: Auswertungsfunktion

Die Auswertungsfunktion kann Zeichenfolgen, die im Wesentlichen dem JSON-Format entsprechen oder annähernd dem JSON-Format entsprechen, direkt in JSON-Objekte konvertieren, indem sie Methoden wie die folgenden verwendet:

eval('(' str ')'); //wobei str die Zeichenfolge ist, die der Beschreibung dieses Titels entspricht


//由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);
Nach dem Login kopieren


Oben wird das Ergebnis „john“ ausgegeben.

Die Eval-Methode kann die folgenden Standard- und Nicht-Standard-Formatzeichenfolgen konvertieren:


var str="{ 'name': 'John' }";
var str2='{ "name": "John" }';
var str3="{ name: 'John' }";
Nach dem Login kopieren


Siehe dieses Beispiel Im Paket herunterladen: JqueryDemo1.html

B: parseJSON-Funktion

Eine weitere Funktion, die Standardzeichenfolgen in JSON-Objekte konvertiert, ist parseJSON(), die wie jQuery .parseJSON( verwendet wird. str)//wobei str die Zeichenfolge ist, die der Beschreibung dieses Titels entspricht


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


Die obigen Ergebnisse werden ausgegeben. „Johannes“.

Diese Methode unterstützt nur das Standardformat: var str='{ "name": "John" }';

Siehe das Download-Paket für dieses Beispiel: JqueryDemo2.html

C: JSON.parse-Funktion

Es gibt auch eine Funktion, die Standardzeichenfolgen in JSON-Objekte umwandelt, JSON.parse(), die als JSON.parse(str) verwendet werden kann. // Wobei str die Zeichenfolge ist, die der Beschreibung dieses Titels entspricht


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


Bei allen oben genannten Schritten wird das Ergebnis ausgegeben „ John".

Diese Methode unterstützt nur das Standardformat: var str='{ "name": "John" }';

Siehe das Download-Paket für dieses Beispiel: JqueryDemo3.html

Die obigen Ergebnisse sind konsistent und alle Namen werden wie unten gezeigt ausgegeben:

Besonderer Hinweis: Wenn obj ursprünglich ein JSON-Objekt ist, verwenden Sie eval ()-Funktion Nach der Konvertierung (sogar bei mehreren Konvertierungen) handelt es sich immer noch um ein JSON-Objekt, es treten jedoch Probleme auf (Auslösen einer Syntaxausnahme), nachdem die Funktion parseJSON() verwendet wurde.

D: Andere Methode

Wenn Sie nicht anders können, als einen Fehler zu machen, möchten Sie wirklich nicht standardmäßige und unregelmäßige Zeichenfolgen analysieren, wie zum Beispiel:


Code kopieren Der Code lautet wie folgt:

oder
{name:mady,age:23}
Nach dem Login kopieren


Code kopieren Der Code lautet wie folgt:

und andere im Wesentlichen korrekte illegale Formate, die Sie sich vorstellen können, dann gibt es Erweiterungsbibliotheken, die das Problem lösen können
{name:'mady',age:23}
Nach dem Login kopieren


jquery-json Die Erweiterungsbibliothek

Die Download-Adresse finden Sie hier:

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

Diese Bibliothek wird verwendet, um jQuery zu erweitern. Für die Verwendung von JSON wurden zwei Funktionen erweitert: toJSON und parseJSON

toJSON-Funktion wird verwendet, um ein gewöhnliches JavaScript-Objekt in ein JSON zu serialisieren Objekt.

Die parseJSON-Funktion wird auch verwendet, um ein gewöhnliches JavaScript-Objekt in ein JSON-Objekt zu serialisieren.



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);
Nach dem Login kopieren


Das Ausführungsergebnis des obigen Codes ist wie folgt:

Siehe das Download-Paket für dieses Beispiel: JqueryDemo5.html

2. Konvertieren Sie das JSON-Objekt in einen String

Sie können toJSONString() verwenden. oder die globale Methode JSON.stringify( ) Konvertiert JSON-Objekte in JSON-Strings.

Zum Beispiel:



Kopieren Sie den Code Der Code lautet wie folgt:

oder
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
Nach dem Login kopieren



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

三、解析读取JSON

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

复制代码 代码如下:

var str2 = { "name": "mady", "sex": "man" };
Nach dem Login kopieren

就可以这样读取:

复制代码 代码如下:

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

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

复制代码 代码如下:

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

解析用:

      alert(str.GetUserPostByIdResult.Name);//一次点不出来,我多点几次
Nach dem Login kopieren

再再复杂一点的如:

复制代码 代码如下:

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


如果你想单挑的话,解析用:

复制代码 代码如下:

alert(dataObj.root[0].name);
Nach dem Login kopieren

弹出:“6200”。

如果你想群挑的话,解析用:


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


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

 

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

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

以上就是jQuery解析Json实例详解_jquery的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Verwandte Etiketten:
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