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 <p style="text-align: left;"> call: </p><pre class="brush:php;toolbar:false">$(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 <p style="text-align: left;">Call: </p><pre class="brush:php;toolbar:false">$(function () {
Loop_ajax(0, array);
});

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

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

推奨読書:

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

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

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