Comment implémenter la boucle Ajax

Cette fois, je vais vous montrer comment implémenter la boucle Ajax, et quelles sont les précautions pour implémenter la boucle Ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.

Ajax Introduction

Ajax se compose de HTML, de la technologie JavaScript™, de DHTML et de DOM , un excellent moyen de transformer des interfaces Web maladroites en applications Ajax interactives. L'auteur de cet article, un expert Ajax, montre comment ces technologies fonctionnent ensemble (d'un aperçu général à une discussion détaillée) pour faire du développement Web efficace une réalité. Il démystifie également les concepts fondamentaux d'Ajax, notamment l'objet XMLHttpRequest.

Il y a cinq ans, si vous ne connaissiez pas XML, vous étiez un vilain petit canard que personne ne prenait au sérieux. Il y a dix-huit mois, Ruby est devenue le centre d'attention et les programmeurs qui ne connaissaient pas Ruby ont dû s'asseoir sur le banc. Aujourd’hui, si vous souhaitez suivre les dernières tendances technologiques, votre destination est Ajax.

Mais Ajax est plus qu'une simple mode, c'est un moyen puissant de créer des sites Web qui n'est pas aussi difficile que d'apprendre une toute nouvelle langue.

1. Exigences commerciales

En développement, lorsqu'une page de liste est chargée, je dois accéder à la liste en fonction de l'identifiant de chaque élément Le côté serveur obtient les données correspondantes puis attribue les données obtenues à l'étiquette correspondant à l'identifiant actuel.

Par exemple, le tableau suivant :

J'ai une série de numéros de produits dont j'ai besoin pour obtenir les noms correspondants des produits auprès du serveur. ajax en fonction des numéros de produit, puis utilisez l'interface de mise à jour js (l'activité réelle n'est bien sûr pas aussi simple que d'obtenir le nom du produit)

Plan de mise en œuvre

2.1 Plan d'erreur

Dans des circonstances normales, nous penserons directement à écrire une

boucle for, lancer une requête ajax pour obtenir des données dans la boucle, puis mettez à jour les données obtenues avec l'identifiant correspondant. Sur l'étiquette,

est le suivant :

Nous simulons une série d'identifiants sous forme de tableau :

var array = [1, 3, 2, 5, 3];

Looping ajax

méthode de requête  :

function foreach_ajax() {
for (var i = 0; i < array.length; i++) {
$.get("/home/loop_ajax", { value: array[i] }, function (data) {
console.log(array[i]+","+data);
});
}
}

Appel :

$(function () {
foreach_ajax(); 
});

Les résultats du test sont les suivants :

Nous pouvons voir que nous ne pouvons pas du tout l'obtenir dans la boucle. La valeur de array[i].

La raison de ce résultat est la suivante : ajax est exécuté de manière asynchrone. À la fin de la boucle, le premier ajax n'a pas renvoyé les données du serveur, et à la fin de la boucle, la variable i in for a été libérée. Donc array[i]=undefined

2.2 Solution correcte

La bonne méthode est de boucler ajax de manière récursive.

est la suivante :

Nous utilisons un tableau pour simuler certaines séries d'identifiants :

var array = [1, 3, 2, 5, 3];

Méthode de requête ajax récursive :

function Loop_ajax(index, array) {
if (index < array.length) { 
var value = array[index];
$.get("/home/loop_ajax", { value: value }, function (data) {
console.log(array[index] + "," + data);
if (index < array.length) {
Loop_ajax(index + 1, array); 
}
});
}
}

Appelez :

$(function () {
Loop_ajax(0, array);
});

Les résultats du test sont les suivants :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Exemple détaillé de formulaire de soumission Ajax (avec code)

Ajax pour obtenir l'API de prévisions météorologiques nationales Données

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!