Comment implémenter une boucle en utilisant Ajax

Cette fois, je vais vous montrer comment utiliser Ajax pour implémenter des boucles, et quelles sont les précautions pour utiliser Ajax pour implémenter des boucles. 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 à la balise 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 :

Quels types de données ajax peut-il gérer renvoyés par le serveur ?

Un traitement parfait des données JSON ne peut pas être effectué avec succès

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!