recherche

Maison  >  Article  >  interface Web  >  Explication détaillée du code de l'utilisation de JSON en JavaScript

Explication détaillée du code de l'utilisation de JSON en JavaScript

yulia
yuliaoriginal
2018-09-14 17:50:371473parcourir

J'ai récemment résumé quelques connaissances JavaScript et les ai partagées avec vous. Cet article se concentre sur JSON, expliquant la différence entre JSON et XML, comment analyser le texte JSON et JSONP.
Il a une certaine valeur de référence. Les amis dans le besoin peuvent y jeter un œil. J'espère que cela pourra vous aider.

1. Qu'est-ce que JSON

JSON est la notation d'objet JavaScript, qui est la notation d'objet JavaScript.

2. Comparaison de JSON et XML

Mêmes points : les deux sont une méthode de stockage et d'échange d'informations textuelles.

Différence : JSON est plus petit, plus rapide et plus facile à analyser que XML. XML faisait fureur avant l'émergence de JSON. XML avait deux fonctions principales, à savoir le stockage de données et la transmission de données. Cependant, au fil du temps, XML est devenu incapable de transmettre des données, donc JSON, né plus tard, l'a remplacé dans la transmission. données.XML. Ainsi, JSON est principalement utilisé pour transmettre des données et XML est principalement utilisé pour stocker des données. Concernant la transmission de JSON en ajax, vous pouvez vous référer à l'article Une brève analyse de l'utilisation d'Ajax.

3. Syntaxe JSON

Les données sont dans la paire "nom:valeur", les données sont séparées par des virgules, les accolades enregistrent l'objet et le les crochets enregistrent le tableau.
Méthodes d'écriture JSON courantes : 

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. Comment analyser le texte JSON

Lorsque la classe javaScript est écrite sous la deuxième forme ci-dessus, elle est nécessaire Analyser JSON et générer les objets javaScript correspondants.

1, méthode eval()

Cette méthode est une méthode intégrée de 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>

Il existe deux façons d'accéder aux données en JSON, l'une est. via des objets .key à obtenir, tels que obj.sites[0].url ; l'autre consiste à obtenir via un objet ["key"], tel que obj.sites[0]["key"]. L'avantage de la première méthode est la simplicité, et l'avantage de la seconde méthode est d'obtenir la valeur de l'objet JSON via une chaîne. Cela peut être appliqué lorsque la clé d'une chaîne doit être épissée dynamiquement, puis la valeur correspondante. est obtenu.

2, méthode JSON.parse()

Remplacez simplement la phrase analysée avec la méthode eval() ci-dessus par ce qui suit :

var obj = JSON .parse(tx );

3, tableau JSON

Lors de l'accès aux données avec Ajax, nous analysons souvent les données JSON renvoyées par le serveur, et le tableau JSON est comparé Couramment utilisé, je parlerai ensuite du analyse des tableaux JSON. Pour analyser le tableau SON, vous pouvez utiliser une boucle for ou une boucle for...in...

Utilisez for-in pour accéder au tableau : 

<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>

Utilisez for. boucle pour accéder au tableau :

<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>

où myObj.sites.length peut obtenir la longueur du tableau des sites.

5. Comment analyser des objets JSON

Si vous devez analyser JSON en texte JSON, il vous suffit d'utiliser la fonction :

var JSONString = JSON. stringify(JSONObject);

La fonction stringify n'analysera pas la fonction, elle supprimera la fonction dans l'objet. Nous pouvons convertir la fonction en chaîne pour résoudre ce problème

var obj = { " name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

//Convertir la fonction en chaîne
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);


JSONP

Quoi est JSONP : JSONP (json width padding), un modèle d'utilisation de json.

Que fait JSONP : il permet aux pages Web d'obtenir des données d'autres noms de domaine, c'est-à-dire de lire des données sur plusieurs domaines.
Pourquoi utiliser JSONP : En raison de la même politique d'origine (une politique de sécurité proposée par NetScape).
Utilisez JSP pour implémenter 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>
Le code complet du serveur : 

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

Le client appelle les données, et le le nom des données est envoyé au serveur. Dans le code qui accède à l'URL du serveur, le client ajoute un paramètre avec un nom de fonction spécifié, qui est jsonCallback, puis utilise getParameter pour obtenir les données sur le serveur, et enfin les envoie au flux selon la syntaxe de js. . Les lecteurs doivent noter ici que les données côté serveur ci-dessus représentent l'intégralité du contenu du fichier jsp, en plus d'utiliser jsp, les lecteurs peuvent également utiliser php ou jquery et d'autres technologies pour implémenter le côté serveur, mais le nom du suffixe et la syntaxe sont utilisés. doit être cohérent.

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!

php JavaScript json jquery ajax Object for xml 字符串 循环 Length var JS function 对象 for...in padding
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment javascript implémente-t-il le transcodage et le décodage d’URL ?Article suivant：Comment javascript implémente-t-il le transcodage et le décodage d’URL ?

Articles Liés

Voir plus