suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Code-Erklärung zur Verwendung von JSON in JavaScript

Detaillierte Code-Erklärung zur Verwendung von JSON in JavaScript

yulia
yuliaOriginal
2018-09-14 17:50:371466Durchsuche

Ich habe kürzlich einige JavaScript-Kenntnisse zusammengefasst und mit Ihnen geteilt. Dieser Artikel konzentriert sich auf JSON und erklärt den Unterschied zwischen JSON und XML, wie man JSON-Text analysiert und JSONP.
Es hat einen gewissen Referenzwert. Freunde in Not können einen Blick darauf werfen.

1. Was ist JSON?

JSON ist die JavaScript-Objektnotation, also die JavaScript-Objektnotation.

2. Vergleich von JSON und XML

Gleiche Punkte: Beide sind eine Methode zum Speichern und Austauschen von Textinformationen.

Unterschied: JSON ist kleiner, schneller und einfacher zu analysieren als XML. XML war vor dem Aufkommen von JSON in aller Munde. XML hatte zwei Hauptfunktionen, nämlich das Speichern von Daten und das Übertragen von Daten. Mit der Zeit war XML jedoch nicht mehr in der Lage, Daten zu übertragen, sodass das später geborene JSON es bei der Datenübertragung ersetzte . XML. Daher wird JSON hauptsächlich zum Übertragen von Daten und XML hauptsächlich zum Speichern von Daten verwendet. Informationen zur Übertragung von JSON in Ajax finden Sie im Artikel „Eine kurze Analyse der Verwendung von Ajax“.

3. JSON-Syntax

Die Daten befinden sich im Paar „Name:Wert“, die Daten werden durch Kommas getrennt, die geschweiften Klammern speichern das Objekt und die Eckige Klammern speichern das Array.
Gemeinsame JSON-Schreibmethoden: 

var sites = [
    { "name":"百度" , "url":"www.baidu.com" }, 
    { "name":"Google" , "url":"www.google.com" }, 
];
或是：
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';

4. So analysieren Sie JSON-Text

Wenn die JavaScript-Klasse in der zweiten Form oben geschrieben ist, müssen Sie sie analysieren JSON, generieren Sie das entsprechende JavaScript-Objekt.

1, eval()-Methode

Diese Methode ist eine integrierte Methode von JavaScript 

<!DOCTYPE html>
<html>
  <head>
    <title>测试JSON</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
  <div id="name">
  </div>
  <script>
var tx = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;
var obj = eval ("(" + tx + ")");
alert(obj.sites[0].name+","+obj.sites[0].url);
</script> 
</body> 
</html>

Es gibt zwei Möglichkeiten, auf Daten in JSON zuzugreifen, eine über ein Objekt .key Um es zu erhalten, z. B. obj.sites[0].url; Die andere Möglichkeit besteht darin, es über das Objekt [„Schlüssel“] zu erhalten, z. B. obj.sites[0][„Schlüssel“]. Der Vorteil der ersten Methode ist die Einfachheit, und der Vorteil der zweiten Methode besteht darin, den Wert des JSON-Objekts über eine Zeichenfolge zu erhalten. Dies kann angewendet werden, wenn der Schlüssel einer Zeichenfolge und dann der entsprechende Wert dynamisch gespleißt werden müssen erhalten wird.

2, JSON.parse()-Methode

Ersetzen Sie einfach den oben mit der eval()-Methode analysierten Satz durch Folgendes:

var obj = JSON .parse(tx );

3, JSON-Array

Beim Zugriff auf Daten mit Ajax analysieren wir häufig die vom Server zurückgegebenen JSON-Daten und vergleichen das JSON-Array. Häufig verwendet, als nächstes werde ich darüber sprechen Parsen von JSON-Arrays. Um SON-Arrays zu analysieren, können Sie for-Schleifen oder for...in...-Schleifen verwenden.

Verwenden Sie for-in, um auf das Array zuzugreifen: 

<body>
<p>你可以使用 for-in 来访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>

Verwenden Sie for-Schleife, um auf das Array zuzugreifen : 

<body>
<p>使用 for 循环访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>

wobei myObj.sites.length die Länge des Sites-Arrays abrufen kann.

5. So analysieren Sie JSON-Objekte

Wenn Sie JSON in JSON-Text analysieren müssen, müssen Sie nur die Funktion verwenden:

var JSONString = JSON. stringify(JSONObject);

Die Funktion stringify analysiert die Funktion nicht, sondern löscht die Funktion im Objekt. Wir können die Funktion in einen String konvertieren, um dieses Problem zu lösen

var obj = { " name": "Runoob", "alexa":function () {return 10000;}, "site": "www.runoob.com"};
//Konvertieren Sie die Funktion in einen String
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

6. JSONP

Was ist JSONP: JSONP(json width padding), ein Verwendungsmuster von JSON.
Was macht JSONP? Es ermöglicht Webseiten, Daten von anderen Domänennamen abzurufen, also Daten domänenübergreifend zu lesen.
Warum JSONP verwenden: Aufgrund der gleichen Ursprungsrichtlinie (eine von NetScape vorgeschlagene Sicherheitsrichtlinie).
Verwendung von JSP zur Implementierung von JSONP

<!DOCTYPE html>
<html>
  <head>
    <title>jsonp.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
 <body>
<script type="text/javascript">    
    function jsonpCallback(result){     
       alert(result[1].name);     
    } 
</script>  
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>

Der vollständige Code des Servers: 

<%  
     String callback = request.getParameter("callback");  
     out.print(callback+"([ { name:&#39;John&#39;,age:&#39;19&#39;},{ name:&#39;joe&#39;,age:&#39;20&#39;}] );"); 
%>

Code-Erklärung:

Derjenige, der die Daten aufruft, ist der Client, und der Einer, der die Daten sendet, wird als Server bezeichnet. Im Code, der auf die URL des Servers zugreift, fügt der Client einen Parameter mit einem angegebenen Funktionsnamen hinzu, nämlich jsonCallback, ruft dann mit getParameter die Daten auf dem Server ab und gibt sie schließlich gemäß der Syntax von js an den Stream aus . Leser müssen hier beachten, dass es sich bei den oben genannten Daten auf der Serverseite um den gesamten Inhalt der JSP-Datei handelt. Zusätzlich zur Verwendung von JSP können Leser auch PHP oder JQuery und andere Technologien verwenden, um die Serverseite zu implementieren, jedoch den Suffixnamen und die verwendete Syntax muss konsistent sein.

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung zur Verwendung von JSON in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript json jquery ajax Object for xml 字符串 循环 Length var JS function 对象 for...in padding
Stellungnahme：
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
Vorheriger Artikel：Wie implementiert Javascript die URL-Transkodierung und -Dekodierung?Nächster Artikel：Wie implementiert Javascript die URL-Transkodierung und -Dekodierung?

In Verbindung stehende Artikel

Mehr sehen