ホームページ > 記事 > ウェブフロントエンド > Ajax のループ スキーム
開発中、リストページがロードされると、サーバーにアクセスしてリスト内の各項目のIDに基づいて対応するデータを取得し、取得したデータを現在のIDに対応するラベルに割り当てる必要があります。これを達成するには?ここで、ajax のループ スキームを紹介します。興味のある方は一緒に学んでください
Ajax の紹介
Ajax は、HTML、JavaScript™ テクノロジー、DHTML、および DOM で構成されており、不器用な Transform を変換できます。 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); }); } }
呼び出し:
$(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); });
テスト結果は次のとおりです:
上記は次のとおりです。私が皆さんのためにまとめたものは、将来的に皆さんのお役に立てば幸いです。
関連記事:
AJAXはユーザーが登録されているかどうかを判断するために使用されます
ajaxは非同期ファイルまたは画像アップロード機能を実装します
WeChatが前のページに戻り、AJAXリクエストが表示される問題を解決しますこのページは Get リクエストの質問には無効です
以上がAjax のループ スキームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。