JavaScriptJSON

JSON est l'abréviation de JavaScript Object Notation, qui est un format d'échange de données.

Qu'est-ce que JSON ?

Le nom anglais complet de JSON est JavaScript Object Notation

JSON est un format d'échange de données léger.

JSON est un langage indépendant *

JSON est facile à comprendre.

En JSON, il n'y a que quelques types de données :

numéro : exactement le même que le numéro de JavaScript ;

booléen : est-ce que JavaScript est vrai ou faux ;

chaîne : est la chaîne de JavaScript ;

null : est la valeur null de JavaScript ;

array : est la représentation Array de JavaScript - [] ;

object : est la représentation { ... } de JavaScript .

et toute combinaison de ce qui précède.

De plus, JSON stipule également que le jeu de caractères doit être UTF-8, il n'y a donc aucun problème à exprimer plusieurs langues. Pour une analyse unifiée, les chaînes JSON doivent utiliser des guillemets doubles "", et les clés d'objet doivent également utiliser des guillemets doubles "".

Parce que JSON est très simple, il est rapidement devenu populaire dans le monde du Web et est devenu un standard ECMA. Presque tous les langages de programmation disposent de bibliothèques pour analyser JSON, et en JavaScript, nous pouvons utiliser JSON directement car JavaScript a une analyse JSON intégrée.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<script type="text/javascript">  
var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 
var json = JSON.stringify(student); 
alert(json); //{"name":"Lanny","age":"25","location":"China"}
</script>  
</head>  
<body>  
</body>  
</html>

JSON est formaté dans un objet JavaScript

Le format JSON est syntaxiquement identique à la création d'un Objet JavaScript Le code est le même.

Parce qu'ils sont similaires, les programmes JavaScript peuvent facilement convertir les données JSON en objets JavaScript.

Règles de syntaxe JSON

Les données sont des paires clé/valeur. Les données sont séparées par des virgules. Les accolades enregistrent l'objet Les crochets enregistrent le tableau

Données JSON - un nom correspond à une valeur

JSON Le format des données est constitué de paires clé/valeur, tout comme les propriétés des objets JavaScript.

Une paire clé/valeur est constituée du nom du champ (entre guillemets doubles), suivi de deux points, puis de la valeur :

"firstName": "John"

Objet JSON

L'objet JSON est stocké entre accolades.

Tout comme en JavaScript, les objets peuvent contenir plusieurs paires clé/valeur :

{"firstName":"John", "lastName":"Doe"}

Tableau JSON

Le tableau JSON est stocké entre crochets.

Tout comme en JavaScript, les tableaux peuvent contenir des objets :

"employés":[
{"firstName": "John", "lastName": "Doe"},
{"firstName": "Anna", "lastName": "Smith "},
{"firstName":"Peter", "lastName":"Jones"}
]

Dans l'exemple ci-dessus, l'objet « employés » est un tableau. Contient trois objets.

Chaque objet est un enregistrement d'un salarié (nom et prénom).

Chaîne JSON convertie en objet JavaScript

Habituellement, nous lisons les données JSON du serveur et affichons les données dans la page Web.

Tout d'abord, créez une chaîne JavaScript, qui est des données au format JSON :

var text = '{ "employés" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" } ,' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Ensuite, utilisez la fonction JavaScript intégrée JSON.parse() pour analyser les caractères Convertir la chaîne en objet JavaScript :

var obj = JSON.parse(text);

Enfin, utilisez le nouvel objet JavaScript dans votre page :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[2].firstName + " " + obj.employees[2].lastName;
</script>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> var arr = ["a", "b", "c"]; var str = JSON.stringify(arr); document.write(str); document.write ("<br/>"); var newArr = JSON.parse(str); while (newArr.length > 0) { document.write(newArr.pop() + "<br/>"); } // Output: var arr = ["a", "b", "c"]; var str = JSON.stringify(arr); document.write(str); document.write ("<br/>"); var newArr = JSON.parse(str); while (newArr.length > 0) { document.write(newArr.pop() + "<br/>"); } </script> </head> <body> </body> </html>

soumettre Réinitialiser le code

Opération automatique

JavaScriptJSON

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]