JS/AJAX/JSON

Question

JS/AJAXとJSONの構文解析が初めてです。私はしばらくの間、このコードスニペットをデバッグしようとしていましたが、私はそれを理解できないようです。

私は動的divに値を追加しようとしていますが、AJAXリクエスト内の$（ "＃" + id）は常にforループ内のidの最後の値を持っています。 forループがdiv idの次の値にインクリメントするたびに、それを追加しません。

誰かが間違っていることを知っていますか？またはこのようなAJAXリクエストですか？

最後のvar myIDはデバッグ用です。 myIDはidの値を正しく取得しますが、AJAXリクエストはforループの最後の値が実行されるまで実行されないようです。

ご協力いただければ幸いです。

for (var x = 0; x < days.length; x++) { 
      var y = days[x]; 
      var id = location + "_day_" + y; 
      $("#" + location).append("<div id='" + id + "'><h2>Day #" + y + "</h2></div>"); 

      $.ajax 
      ({ 
       type: "GET", 
       url: jsonFile, 
       dataType: "json", 
       success: function(json) { 

        for (var i = 0; i < json.trips.length; i++) { 
         var name = json.trips[i].name; 
         var cost = json.trips[i].cost; 

         radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>"; 
         $("#" + id).append(radioButton); 
        } 
       } 
      }); 
      var myID = id; 
    } 

Answer 1

これは、Ajaxコールバックが（要求が完了した後に）後で呼び出されず、その時間までにidの値がループの最後の値になるためです。あなたはこの問題を解決するためにクロージャを使用する必要があります。

{ 
    type: "GET", 
    url: jsonFile, 
    dataType: "json", 
    success: (function(id){ 
      return function(json) { 

       for (var i = 0; i < json.trips.length; i++) { 
        var name = json.trips[i].name; 
        var cost = json.trips[i].cost; 

        radioButton = "<label><input type='radio' name='day_" + y + "' />" + name + " - $" + cost + ".00</label><br>"; 
        $("#" + id).append(radioButton); 
       } 
      }; 
     })(id) 
} 

今すぐ関数がローカル変数として、代わりにこの関数を作ってから変更された外側のスコープで変数を使用してのIDを渡されます。

あなたの理解を深めるために、あなたに何が起こっているかの例を示します。http://jsfiddle.net/qXCKZ/ idの新しい値がどのように警告されるかに注目してください。ここで

は、クロージャを使用して、変数のローカルコピーを作成するソリューションです。 http://jsfiddle.net/DAwNz/

あなたは$アヤックス電話をかけるとき

Answer 2

はあなたが別の関数の中にforループの内容を移動しようとしたことがありますか？私は閉鎖バインディングの問題があると思いますが、idがajax関数を呼び出したときと同じ値になることが期待されます。すべてのコンテンツを別の関数に移動すると、id変数が関数のスコープにバインドされます。

Answer 3

Ajaxリクエストは、リクエストを意味する非同期開始されているが、それは通過いっています応答を待つ代わりにコードを使用してください。 forループは非常に高速です。したがって、ajaxリクエストが戻ってくるまでに、forループはすでに終了しています。また、ID変数は包含関数のローカルなので、成功関数が呼び出されるまで使用されません。

これを解決するには、クロージャを使用します。これにより、ajax呼び出しを行う瞬間にID変数の値を渡すことができます。例えば

：その関数の終了時に（ID）を有する

$.ajax({ 
    ... 
    success: (function (id) { 
     return function(json) { 
     ... 
     } 
    }(id)); 
}); 

とすぐコードが処理される機能を実行し、そのコンテキストにローカル変数IDを行います。最初に定義しようとしていたコールバック関数を返します。

希望に役立ちます。 :)

Answer 4

コールにasync：falseプロパティを追加するだけであれば。これはうまくいくでしょう。