So implementieren Sie eine Ajax-Schleife

Dieses Mal zeige ich Ihnen, wie Sie die Ajax-Schleife implementieren und welche Vorsichtsmaßnahmen für die Implementierung der Ajax-Schleife gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ajax Einführung

Ajax besteht aus HTML, JavaScript™-Technologie, DHTML und DOM , eine großartige Möglichkeit, umständliche Webschnittstellen in interaktive Ajax-Anwendungen umzuwandeln. Der Autor dieses Artikels, ein Ajax-Experte, zeigt, wie diese Technologien zusammenarbeiten – von einem allgemeinen Überblick bis zu einer detaillierten Diskussion –, um eine effiziente Webentwicklung Wirklichkeit werden zu lassen. Er entmystifiziert auch die Kernkonzepte von Ajax, einschließlich des XMLHttpRequest-Objekts.

Wenn Sie XML noch nicht kannten, waren Sie vor fünf Jahren ein hässliches Entlein, das niemand ernst nahm. Vor achtzehn Monaten rückte Ruby in den Mittelpunkt der Aufmerksamkeit, und Programmierer, die Ruby nicht kannten, mussten auf der Bank sitzen. Wenn Sie heute mit den neuesten Technologietrends Schritt halten möchten, ist Ajax Ihr Ziel.

Aber Ajax ist mehr als nur eine Modeerscheinung, es ist eine leistungsstarke Möglichkeit, Websites zu erstellen, die nicht so schwierig ist wie das Erlernen einer ganz neuen Sprache.

1. Geschäftsanforderungen

Wenn in der Entwicklung eine Listenseite geladen wird, muss ich anhand der ID von zur Liste gehen jedes Element Die Serverseite erhält die entsprechenden Daten und weist die erhaltenen Daten dann dem Etikett zu, das der aktuellen ID entspricht.

Zum Beispiel die folgende Tabelle:

Ich habe eine Reihe von Produktnummern, über die ich die entsprechenden Namen der Produkte abrufen muss Ajax basierend auf den Produktnummern und dann die js-Update-Schnittstelle verwenden (das eigentliche Geschäft ist natürlich nicht so einfach wie das Abrufen des Produktnamens)

2. Implementierungsplan

2.1 Fehlerplan

Unter normalen Umständen denken wir direkt daran, eine for-Schleife zu schreiben und eine Ajax-Anfrage zu initiieren, um darin Daten abzurufen Durchlaufen Sie die Schleife und aktualisieren Sie dann die erhaltenen Daten auf die entsprechende ID. Auf dem Etikett lautet

wie folgt:

Wir simulieren einige Serien von IDs als Array:

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

Looping AjaxAnforderungsmethode :

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);
});
}
}

Aufruf:

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

Die Testergebnisse lauten wie folgt:

Wir können sehen, dass wir es überhaupt nicht in die Schleife bekommen können. Der Wert von array[i].

Der Grund für dieses Ergebnis ist: Ajax wird asynchron ausgeführt. Am Ende der Schleife hat das erste Ajax die Serverdaten nicht zurückgegeben, und wenn die Schleife endet, wurde die Variable i in for freigegeben. Also array[i]=undefiniert

2.2 Richtige Lösung

Der richtige Weg ist, Ajax rekursiv zu schleifen.

lautet wie folgt:

Wir verwenden ein Array, um eine Reihe von IDs zu simulieren:

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

Rekursive Ajax-Anfragemethode:

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); 
}
});
}
}

Rufen Sie an:

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

Die Testergebnisse lauten wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detailliertes Beispiel eines Ajax-Einreichungsformulars (mit Code)

Ajax zum Erhalten einer nationalen Wettervorhersage-API Daten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Ajax-Schleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!