JavaScriptJSON

JSON est un format utilisé pour stocker et transmettre des données.

JSON est généralement utilisé par le serveur pour transférer des données vers des pages Web.

Qu'est-ce que JSON ?

Nom anglais complet JSON Notation d'objet JavaScript
JSON est un format léger d'échange de données.
JSON est un langage indépendant *
JSON est facile à comprendre.

Astuce : JSON utilise la syntaxe JavaScript, mais le format JSON n'est que du texte.
Le texte peut être lu par n'importe quel langage de programmation et transmis sous forme de format de données.

La syntaxe JSON suivante définit l'objet employés : Tableau de 3 enregistrements d'employés (objets) :

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

JSON est formaté en tant qu'objet JavaScript

Le format JSON est syntaxiquement identique à la création de code objet JavaScript.

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

Les données JSON sont formatées sous forme 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 :

"employees":[
{"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).

Convertir la chaîne JSON en objet JavaScript

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

Par souci de simplicité, nous définissons la chaîne JSON directement dans notre page Web.

Tout d'abord, créez une chaîne JavaScript. La chaîne est une donnée au format JSON :

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

Ensuite, utilisez le La fonction JavaScript intégrée JSON. parse() convertit une chaîne en un objet JavaScript :

var obj = JSON.parse(text);

Enfin, utilisez le nouvel objet JavaScript dans votre page :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h2>为 JSON 字符串创建对象</h2>
<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[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

Exécutez le programme pour l'essayer

Fonctions associées

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>为 JSON 字符串创建对象</h2> <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[1].firstName + " " + obj.employees[1].lastName; </script> </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]