jQueryで複数のAJAXリクエストを使用するときに複数のdivを更新する方法

Question

jQueryを使用してページを構築しています。ウェブサイトからajax経由でデータを取得しています。

私はループしているデータの配列を持っています。ユニークなIDを持つ多数のdivを作成しています。私は、これらのdivの内容を記入するのに成功関数を使用して、ajaxリクエストを作成します。

問題は、成功関数を実行すると、更新するdivがわからないということです。

コードは次のようになります（メモリから書き込まれます）。

<div id="page"></div> 
... 
var counter = 1; 
["intro","about","links"].each(function (index) { 
    var frag='<div id="id_'+counter+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
     url: "/data/"+index, 
     success: function (response) { 
     $("#id_"+counter).html(response.responseText); 
     } 
    }); 
    counter++; 
} 

は私が私がいる問題は、そのカウンタは、時間によってAJAX機能のリターンを3に達していると思いますので、＃のID_ +カウンタは、＃のすべての要求についてID_3、というよりもID_1、ID_2及びID_3です。

このリクエストを書き込む正しい方法は何ですか？

Answer 1

Ajaxを同期して実行するように設定するだけで、各ループはAjaxが終了するのを待ってからcounterをインクリメントします。

var counter = 1; 
["intro","about","links"].each(function (index) { 
    var frag='<div id="id_'+counter+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
     url: "/data/"+index, 
     success: function (response) { 
      $("#id_"+counter).html(response.responseText); 
     }, 
     async: false 
    }); 
    counter++; 
} 

Answer 2

あなたはcounter変数を必要としない、あなたはむしろそれがループによって管理されている、あなたはそれをインクリメントされていないためにそれを望むように動作するはずですindex使用することができます。

私はそれをテストしていないので、期待どおりに動作するかどうかはわかりません。

["intro","about","links"].each(function (index) { 
    var frag='<div id="id_'+(index+1)+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
     url: "/data/"+index, 
     success: function (response) { 
      $("#id_"+(index+1)).html(response.responseText); 
     } 
    }); 
} 

Answer 3

文字列の単純なリストを反復する代わりに、セクションをオブジェクトと一緒にオブジェクトとして保存してから反復することができます。

<div id="introDiv"></div> 
<div id="aboutDiv"></div> 
<div id="linksDiv"></div> 

var sections = [ 
    { section: "intro", target: "introDiv" }, 
    { section: "about", target: "aboutDiv" }, 
    { section: "links", target: "linksDiv" } 
]; 

$.each(sections, function(index, value) { 
    $.ajax({ 
     url: "/data/" + index, 
     method: "get" 
    }) 
    .then(function(result) { 
     $("#" + value.target).html(result); 
    }); 
}); 

要素を動的に作成することもできますが、マッピングを説明するために静的にすることができます。また、動的に作成された要素を見つけるためにデリゲートが必要です。

数字のIDが必要な場合は、ターゲットがすべてオンザフライで作成されているため、ターゲットを知る必要はありません。

しかし、応答の順序は保証されません。これが非同期要求の性質です。

Answer 4

理想的には、サーバーがajaxレスポンスの一部としてインデックスを返すことが理想的です。そして、あなたはこのような何か行うことができます。また

<div id="page"></div> 
... 
var counter = 1; 
["intro","about","links"].each(function (index) { 
    var frag='<div id="id_'+counter+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
     url: "/data/"+index, 
     data: {index: index}, 
     success: function (response) { 
     $("#id_"+response.index).html(response.responseText); 
     } 
    }); 
    counter++; 
} 

を、代わりにdata: {index: index}を送信する、あなただけのサーバがURLのテキストのうち、インデックスを解析作ることができます。