Ajaxループの実装方法

今回は、Ajax ループの実装方法と、Ajax ループを実装する際の 注意点 について説明します。以下は実際のケースです。見てみましょう。

Ajax はじめに

Ajax は、HTML、JavaScript™ テクノロジー、DHTML および DOM で構成されており、不格好な Web インターフェイスをインタラクティブな Ajax アプリケーションに変換する素晴らしい方法です。 Ajax の専門家であるこの記事の著者は、一般的な概要から詳細な説明まで、これらのテクノロジがどのように連携して効率的な Web 開発を実現するかを示します。また、XMLHttpRequest オブジェクトなど、Ajax の中核となる概念についてもわかりやすく説明しています。

5 年前、XML を知らなければ、あなたは誰も真剣に受け止めてくれない醜いアヒルの子でした​​。 18 か月前、Ruby は注目の的となり、Ruby を知らないプログラマーはベンチに座らざるを得ませんでした。現在、最新のテクノロジーの流行についていきたいなら、目的地は Ajax です。

しかし、Ajax は単なる流行ではなく、まったく新しい言語を学習するほど難しくない、Web サイトを構築するための強力な方法です。

1. ビジネス要件

開発中、リストページがロードされると、サーバーにアクセスしてリスト内の各項目のIDに基づいて対応するデータを取得し、取得したデータを割り当てる必要がありますデータを現在の ID に対応するラベルにコピーします。

たとえば、次のテーブル:

一連の製品番号があるので、製品番号に基づいて Ajax を介してサーバーから製品の対応する名前を取得し、js を使用して更新する必要があります。インターフェース (実際の業務は、もちろん製品名を取得することではありません) シンプル)

2. 実装計画

2.1 エラー計画

通常であれば、forループを直接書くことを考えます。 、ループ内でデータを取得するための ajax リクエストを開始し、次のようにデータが対応する ID

に対応するラベルに更新されます。

一連の ID をシミュレートするために配列を使用します。

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

ループ ajax リクエスト メソッド :

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

call:

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

テスト結果は次のとおりです:

ループ内では array[i] の値をまったく取得できないことがわかります。

この結果の理由は、ajax が非同期で実行されるためです。ループの最後で、最初の ajax はサーバー データを返しておらず、ループの終了時に for の変数 i が解放されているため、array[i ]=unknown

2.2 正しい解決策

正しい方法は、ajax を再帰的にループすることです。

は次のとおりです:

配列を使用して一連のIDをシミュレートします:

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

再帰的ajaxリクエストメソッド:

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

Call:

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

テスト結果は次のとおりです:

I believe youこの記事の事例を読んでその方法をマスターした方は、よりエキサイティングな内容については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

Ajax フォーム送信の詳細な例 (コード付き)

Ajax は全国天気予報の API データを取得します

以上がAjaxループの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。