Ajax / jquery.getjson exemple simple

Cet article explore la signification de JSON et son application pratique dans le développement Web, mettant en évidence les fonctions pratiques de JQuery pour gérer les données JSON.

Points clés:

• JSON (notation d'objet JavaScript) est un format basé sur le langage et basé sur le texte idéal pour la transmission de données dans les applications Web. Sa structure concise le rend plus efficace que Xml.
• La méthode $.getJSON() de JQuery simplifie le chargement des données JSON à partir de sources distantes. Il accepte une URL, des données facultatives pour le serveur et une fonction de rappel pour les réponses réussies.
• La méthode plus polyvalente $.ajax() offre un contrôle plus fin sur les paramètres de demande, y compris le fonctionnement asynchrone (async: true).
• valider JSON à l'aide d'outils comme JSONlint est crucial en raison de la syntaxe stricte de JSON. Des erreurs comme les virgules de traîne ou le formatage des clés incohérentes peuvent causer des problèmes.
• Le débogage des problèmes JSON implique la vérification du format JSON et du type MIME du serveur et de l'inspection des données renvoyées à l'aide de la journalisation de la console.

Comprendre JSON:

JSON, ou notation d'objet JavaScript, est un format basé sur le texte indépendant du langage couramment utilisé pour l'échange de données dans les applications Web. Cet article se concentre sur la récupération des données JSON via des demandes de GET HTTP (d'autres méthodes comme le post sont également possibles).

L'efficacité de JSON découle de sa structure compacte, conduisant à des tailles de fichiers plus petites et à l'analyse plus rapide par rapport au XML. Cette efficacité s'étend à des formats binaires comme BSON, qui exploitent la représentation des objets de JSON.

jQuery et JSON:

jQuery fournit la méthode $.getJSON() pour la manipulation JSON rationalisée. Il s'agit d'une version simplifiée de $.ajax(), définissant implicitement des options pertinentes. La syntaxe est:

<code class="language-javascript">$.getJSON(url, data, success);</code>

• url: L'URL de la source de données JSON (requise).
• data: données facultatives à envoyer au serveur (objet ou chaîne).
• success: Une fonction de rappel exécutée sur une récupération réussie (facultative). Un simple rappel peut ressembler:

<code class="language-javascript">function success(data) {
  // Process the 'data' object
}</code>

L'équivalent utilisant $.ajax() offre un contrôle plus explicite:

<code class="language-javascript">$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});</code>

Exemple d'application:

Une démonstration simple utilise Node.js avec le package live-server pour servir un fichier JSON statique (example.json). Le JavaScript côté client (main.js) utilise $.getJSON() pour récupérer et afficher les données.

Exemple de javascript (main.js):

<code class="language-javascript">$.getJSON(url, data, success);</code>

Ce code attend le chargement du DOM, puis gère un événement de clic pour récupérer le JSON, la conversion d'une partie en une liste non ordonnée et l'affichage du JSON brut. La nature asynchrone de $.getJSON() est démontrée.

Exemple de json (example.json):

<code class="language-javascript">function success(data) {
  // Process the 'data' object
}</code>

Échantillon HTML (index.html):

<code class="language-javascript">$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});</code>

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!