Notes d'étude jQuery - Opération Ajax (1) - Data Loading_jquery

Charger le HTML

Nous utilisons généralement la méthode de chargement HTML pour charger des fragments HTML et les insérer dans la position spécifiée. Supposons que la page actuelle soit :

.

<div></div>
<button>load</button>

Le contenu du fichier test.html dans le même répertoire est :

<span>test</span>

Nous pouvons utiliser la méthode load pour charger du HTML et le lier à l'événement de clic du bouton :

 $('button').click(function() {
  $('div').load('test.html');
 });

Après avoir cliqué sur le bouton :

Chargement JSON

JSON est Javascript Object Notation, littéralement traduit par Javascript Object Notation, il peut donc facilement représenter et transmettre des données. Il stipule que les clés et les valeurs doivent être placées entre guillemets doubles et que les fonctions sont des valeurs JSON illégales.

{
  "name": "stephenlee", 
  "sex": "male"
}

Enregistrez les données JSON ci-dessus dans le fichier test.json. Nous pouvons utiliser la méthode getJSON pour charger des données JSON et également les lier à l'événement click du bouton :

 $('button').click(function() {
  $.getJSON('test.json');
 });

Puisque la méthode getJSON est définie comme un objet global de jQuery, vous devez utiliser $ pour appeler cette méthode. Ici, $ fait référence à l'objet jQuery global, et non aux objets jQuery individuels auxquels $() fait référence. C'est pourquoi nous appelons également la fonction getJSON une fonction globale.
Mais nous constaterons que le code ci-dessus n'obtient que les données JSON, mais ne voit aucun effet. Ici, nous pouvons utiliser le deuxième paramètre de la méthode getJSON comme fonction de rappel pour tester l'effet :

.

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

Après avoir cliqué sur le bouton, jetons un œil au résultat dans la console :

Le premier paramètre de chaque fonction ici peut recevoir un tableau ou un objet, et le deuxième paramètre est la fonction de rappel de valeur, qui prend l'index et la valeur actuels du tableau ou de l'objet dans chaque boucle comme paramètres.

Chargement de JS

Parfois, nous ne voulons pas charger tous les fichiers JS lors du premier chargement de la page, mais les charger dynamiquement en fonction de la demande. Supposons qu'il y ait un fichier JS dans le répertoire actuel avec une simple alerte :

$(function() {
 alert('test');//
})

On peut utiliser la fonction globale getScript pour charger le fichier et le lier à l'événement click du bouton :

 $('button').click(function() {
  $.getScript('test.js');
 });

Après avoir cliqué sur le bouton, le fichier test.js est chargé et l'alerte est déclenchée avec succès.

Charger XML

L'opération de chargement de XML est similaire à JSON, car le rôle des documents XML est également lié au stockage des données. Créez un fichier text.xml dans le même répertoire avec le contenu :

.

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

Vous pouvez utiliser directement la méthode get pour charger des documents XML. La raison pour laquelle cela ressemble à une méthode par défaut peut être vue à partir du nom complet d'AJAX - Asynchronous JavaScript And XML.
Liez-le également à l'événement de clic sur le bouton :

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

Voir la console et le résultat est :

Il convient de noter ici que si le format du document XML est incorrect, même si aucune erreur ne sera signalée, la fonction de rappel ne sera pas exécutée.