Analyse des opérations jQuery Ajax (1) Chargement des données

Ajax De manière générale, les données peuvent être chargées depuis le serveur ou le client sans rafraîchir la page. Bien entendu, les formats de ces données sont divers.

Charger le HTML

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

<.>

<p></p>
<button>load</button>

Le contenu du fichier

dans le même répertoire est : test.html

<span>test</span>

Nous pouvons utiliser la méthode

pour charger load et liez-le au clic du bouton HTMLÉvénement sur :

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

Après avoir cliqué sur le bouton :

Chargement JSON

c'est-à-direJavascriptJSON Notation d'objet, littéralement traduit par <a href="http://www.php.cn/wiki/48.html" target="_blank">Javascript</a> Object Notation notation d'objet, par conséquent, il peut 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 Javascript valeurs illégales. JSON

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

Enregistrez les

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

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

Puisque la méthode

est définie comme un objet global de getJSON , donc jquery doit être utilisé ici pour appeler cette méthode. Ici, $ fait référence à l'objet $ global, et non aux objets jQuery individuels auxquels $() fait référence. Par conséquent, nous appelons également la fonction jQuery comme la getJSONfonction globale . Mais nous constaterons que le code ci-dessus obtient uniquement les données
, mais ne voit aucun effet. Ici, nous pouvons utiliser le deuxième paramètre de la méthode JSON comme getJSONfonction 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 coup d'œil à la sortie dans

 : console

Le premier paramètre du La fonction

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

Chargement de JS

Parfois, nous ne voulons pas charger tous les fichiers

lors du premier chargement de la page, mais les charger dynamiquement en fonction de la demande. > fichier dans le répertoire courant. > fichier, le contenu est un simple JS : JSalert

Nous pouvons utiliser la fonction globale

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

pour charger le fichier, et également le lier à l'événement click du bouton :

getScript

Après avoir cliqué sur le bouton, le fichier

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

est chargé et

est déclenché avec succès. test.jsalertChargement XML

L'opération de chargement de

est similaire à celle de

, car le rôle du document XML est également lié au stockage des données. Créez un fichier JSON dans. le même répertoire. Le contenu est : XMLtext.xml

Le chargement du document

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

peut utiliser directement la méthode

. La raison pour laquelle cela ressemble à une méthode par défaut peut être vue à partir du nom complet de XML. – get. AJAXLiez-le de la même manière à l'événement de clic sur le bouton : Asynchronous JavaScript And XML

Afficher

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

Le résultat est :

console

Vous devez faire attention ici , if

S'il y a une erreur de format dans le document, même si aucune erreur ne sera signalée, la fonction de rappel ne sera pas exécutée.

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!