Maison >interface Web >js tutoriel >Compréhension simple de json
Json est jsobjet.
-----
En termes simples, JSON peut convertir un ensemble de données représenté dans un objet JavaScript en une chaîne, qui peut ensuite être utilisée dans Passez facilement cette chaîne entre les fonctions , ou transmettez une chaîne d'un client Web à un programme côté serveur dans une application asynchrone. Cette chaîne semble un peu bizarre (vous verrez quelques exemples plus tard), mais JavaScript l'interprète facilement et JSON peut représenter des structures plus complexes que des paires nom/valeur. Par exemple, il est possible de représenter des tableaux et des objets complexes plutôt que de simples listes de clés et de valeurs.
Exemple JSON simple
Dans sa forme la plus simple, le JSON suivant peut être utilisé pour représenter des paires nom/valeur :
{ "firstName": "Brett" }
Cet exemple Très basique et prend en fait plus de place que la paire équivalente nom/valeur en texte brut :
firstName=Brett
Cependant, lorsque vous enchaînez plusieurs paires nom/valeur, le JSON reflétera sa valeur. Tout d'abord, vous pouvez créer un enregistrement contenant plusieurs paires nom/valeur, telles que :
{ "firstName": "Brett", "lastName": "McLaughlin", "email": "brett@newInstance.com " >
Au niveau de la syntaxe, ce n'est pas un énorme avantage par rapport aux paires nom/valeur, mais dans ce cas, JSON est plus facile à utiliser et plus lisible. Par exemple, il indique clairement que les trois valeurs ci-dessus font partie du même enregistrement ; les accolades rendent les valeurs liées d'une manière ou d'une autre.
Tableau de valeurs
Lorsque vous devez représenter un ensemble de valeurs, JSON peut non seulement améliorer la lisibilité, mais également réduire la complexité. Par exemple, supposons que vous souhaitiez représenter une liste de noms de personnes. En XML, un certain nombre de balises d'ouverture et de fermeture sont requises ; si vous utilisez des paires nom/valeur typiques (comme celles que vous avez vues dans les articles précédents de cette série), vous devez créer un format de données propriétaire, ou modifiez le nom de la clé en quelque chose comme person1-firstName.
Si vous utilisez JSON, regroupez simplement plusieurs enregistrements avec des accolades :
{ "people": [
{ "firstName" : "Brett", " lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName": "Hunter", " email": "jason@ servlets.com" },
{ "firstName": "Elliotte", "lastName": "Harold", "email": "elharo@macfaq.com" }
]}
Ce n'est pas difficile à comprendre. Dans cet exemple, il n'y a qu'une seule variable nommée people, et la valeur est un tableau contenant trois entrées, chaque entrée étant un enregistrement pour une personne contenant un prénom, un nom et une adresse e-mail. L'exemple ci-dessus montre comment utiliser des parenthèses pour combiner des enregistrements en une seule valeur. Bien entendu, plusieurs valeurs (chacune contenant plusieurs enregistrements) peuvent être exprimées en utilisant la même syntaxe :
{ "programmers": [
{ "firstName": "Brett", "lastName " ": "McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName": "Hunter", "email": "jason@ servlets .com" },
{ "firstName": "Elliotte", "lastName": "Harold", "email": "elharo@macfaq.com" }
],
"auteurs": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science-fiction" },
{ " firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre " : "fiction chrétienne" }
],
"musiciens": [
{ "firstName": "Eric", "lastName": "Clapton", " instrument " : "guitare" },
{ "firstName": "Sergei", "lastName": "Rachmaninov", "instrument": "piano" }
]
}
La chose la plus remarquable ici est qu'il peut représenter plusieurs valeurs, et chaque valeur contient à son tour plusieurs valeurs. Cependant, il convient également de noter que les paires nom/valeur réelles dans l'enregistrement peuvent différer selon les différentes entrées principales (programmeurs, auteurs et musiciens). JSON est entièrement dynamique, ce qui permet à la façon dont les données sont représentées de changer au milieu de la structure JSON.
Aucune contrainte prédéfinie ne doit être respectée lorsque vous travaillez avec des données au format JSON. Par conséquent, au sein d’une même structure de données, la façon dont les données sont représentées peut être modifiée, et la même chose peut même être représentée de différentes manières.
Utiliser JSON en JavaScript
Une fois maîtrisé le format JSON, l'utiliser en JavaScript est simple. JSON est un format JavaScript natif, ce qui signifie que vous n'avez pas besoin d'une API ou d'une boîte à outils spéciale pour traiter les données JSON en JavaScript.
Attribuer des données JSON à une variable
Par exemple, vous pouvez créer une nouvelle variable JavaScript et lui attribuer directement la chaîne de données au format JSON :
var people =
{ "programmeurs" : [
{ "firstName": "Brett", "lastName": "McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason ", "lastName": "Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName": "Harold", "email ": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov ", "genre": "science-fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ " firstName": "Frank", "lastName": "Peretti", "genre": "fiction chrétienne" }
],
"musiciens": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitare" },
{ "firstName": "Sergei", "lastName": "Rachmaninov", "instrument ": "piano" }
]
}
C'est très simple ; maintenant people contient les données au format JSON que nous avons vu plus tôt. Mais cela ne suffit pas, car la manière d’accéder aux données ne semble pas encore évidente.
Accès aux données
Bien que cela ne semble pas évident, la longue chaîne ci-dessus n'est en réalité qu'un tableau ; vous pouvez facilement accéder à ce tableau en le plaçant dans une variable JavaScript. En fait, utilisez simplement la notation par points pour représenter les éléments du tableau. Ainsi, pour accéder au nom de famille de la première entrée de la liste des programmeurs, utilisez simplement le code suivant en JavaScript :
people.programmers[0].lastName;
Notez que le tableau Index est de base zéro. Ainsi, cette ligne de code accède d'abord aux données de la variable people ; puis se déplace vers l'entrée appelée programmeurs, puis se déplace vers le premier enregistrement ([0]) ; et enfin, accède à la valeur de la clé lastName. Le résultat est la valeur de chaîne « McLaughlin ».
Voici quelques exemples utilisant la même variable.
people.authors[1].genre // La valeur est "fantasy"
people.musicians[3].lastName // Non défini Cela fait référence à la quatrième entrée,
et il n'y en a pas. 🎜>people.programmers.[2].firstName // La valeur est "Elliotte"
En utilisant cette syntaxe, toutes les données au format JSON peuvent être traitées sans utiliser de boîte à outils ou d'API JavaScript supplémentaire.
Modifier les données JSON
Tout comme vous pouvez accéder aux données à l'aide de points et de parenthèses, vous pouvez également facilement modifier les données de la même manière :
people.musicians[1].lastName = "Rachmaninov ";
Après avoir converti la chaîne en objet JavaScript, vous pouvez modifier les données de la variable comme ceci.
Reconvertir en chaîne
Bien sûr, toutes les modifications de données ont peu de valeur si vous ne pouvez pas facilement reconvertir l'objet au format de texte mentionné dans cet article. Cette conversion est également simple en JavaScript :
String newJSONtext = people.toJSONString();C'est tout ! Vous disposez désormais d'une chaîne de texte que vous pouvez utiliser n'importe où, par exemple comme chaîne de requête dans une application Ajax.
Plus important encore, tout objet JavaScript peut être converti en texte JSON. Il n'est pas seulement possible de gérer des variables initialement affectées avec des chaînes JSON. Pour convertir un objet nommé myObject, exécutez simplement une commande de la même forme :
String myObjectInJSON = myObject.toJSONString();
C'est la plus grande différence entre JSON et les autres formats de données abordés dans cette série. Si vous utilisez JSON, il vous suffit d'appeler une fonction simple pour obtenir les données formatées, prêtes à l'emploi. Pour les autres formats de données, une conversion entre les données brutes et formatées est requise. Même lorsque vous utilisez une API telle que le Document Object Model (qui fournit des fonctions pour convertir vos propres structures de données en texte), vous devez apprendre l'API et utiliser les objets de l'API au lieu d'utiliser des objets et une syntaxe JavaScript natifs.
L'essentiel est que si vous traitez un grand nombre d'objets JavaScript, JSON est presque certainement un bon choix afin que vous puissiez facilement convertir les données dans un format pouvant être envoyé au programme côté serveur dans la requête.
Conclusion
Cette série a consacré beaucoup de temps à discuter des formats de données, principalement parce que presque toutes les applications asynchrones finiront par traiter les données. Vous deviendrez plus compétent en Ajax si vous maîtrisez les différents outils et techniques d'envoi et de réception de tous types de données, et si vous les utilisez de la manière qui fonctionne le mieux pour chaque type de données. En plus de maîtriser XML et le texte brut, maîtrisez JSON afin de pouvoir gérer des structures de données plus complexes en JavaScript.
Le prochain article de cette série ira au-delà de l'envoi de données et fournira un aperçu approfondi de la manière dont les programmes côté serveur reçoivent et traitent les données au format JSON. Expliquez également comment les programmes côté serveur peuvent renvoyer des données au format JSON entre des scripts et des composants côté serveur, vous permettant ainsi de mélanger des requêtes et réponses XML, texte brut et JSON. Cela offre une grande flexibilité pour utiliser tous ces outils dans presque toutes les combinaisons.
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!