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:

$.getJSON(url, data, success);

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

function success(data) {
  // Process the 'data' object
}

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

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

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

$.getJSON(url, data, success);

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

function success(data) {
  // Process the 'data' object
}

Échantillon HTML (index.html):

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

$.ajax() le $. Ajax () </p> Méthode: <p> <code>$.ajax() async la méthode $. Ajax () </p> fournit un contrôle plus complet, permettant un paramètre explicite d'options comme <code> async <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$(document).ready(() =&gt; { const $showData = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bshow-data'); const $raw = $('pre'); $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bget-data').on('click', (e) =&gt; { e.preventDefault(); $showData.text('Loading...'); $.getJSON('example.json', (data) =&gt; { const markup = data.items.map(item =&gt; `&lt;li&gt;${item.key}: ${item.value}&lt;/li&gt;`).join(''); const list = $('&lt;ul&gt;&lt;/ul&gt;').html(markup); $showData.html(list); $raw.text(JSON.stringify(data, undefined, 2)); }); }); });</pre><div class="contentsignin">Copier après la connexion</div></div> pour une exécution simultanée: <p> <code>overrideMimeType

Le OvernideMiMetype <p> est affiché à des fins illustratives; jQuery gère généralement les types de mime automatiquement. <strong> </strong> </p> Validation JSON et gestion des erreurs: <p> </p> <p> Valider toujours JSON à l'aide d'outils comme Jsonlint. Les erreurs communes incluent des erreurs de syntaxe (jetons inattendus), souvent en raison de JSON mal formé. Le débogage consiste à vérifier la réponse du serveur, le type MIME et l'utilisation de la journalisation de la console pour inspecter les données. <strong> </strong> </p> Conclusion: <p> <code>$.getJSON() $.ajax() JSON est un format d'échange de données vital, et les méthodes de jQuery

et $. Ajax () <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Simplifier son utilisation dans les applications Web. Une validation appropriée et une gestion des erreurs sont essentielles pour une intégration JSON robuste. <script src="main.js"></script>

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!