1

checkboxonの動的リストを作成してい$.ajaxます:

 function load() {
        $.ajax({
            type: "POST",
            url: "*************",
            data: "************",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            error: function (x, e) { alert(e.responseText); },
            success: function (objTrendList) {
                $.each(objTrendList, function (index, value) {
                    // append the checkbox panels to tool div 
            $('#tools').append('<input type="checkbox" id="checkbox_' +
            value.LngTrendID + '" checked="checked" value="0" />&nbsp;<div 
            style="display:inline;">' + value.StrTrendName + '</div><br />');

                });
             } 
        });
    }
    $(document).ready(function () {
        load();
        console.log($('#tools :checkbox')); // i know I don't get any thing here 
        because the this line is called before the ajax function 

    });

この行はajax関数の前に呼び出されるため、console.log行で何も得られないことはわかっています

質問$(document).ready()最初にajax関数をロードするにはどうすればよいですか?

4

2 に答える 2

4

ajax 呼び出しを返し、 $.ajax で既に組み込まれている遅延オブジェクトを使用します。

function load() {
    return $.ajax({
        type: "POST",
        url: "*************",
        data: "************",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        error: function (x, e) { alert(e.responseText); },
        success: function (objTrendList) {
            $.each(objTrendList, function (index, value) {
                // append the checkbox panels to tool div 
        $('#tools').append('<input type="checkbox" id="checkbox_' +
        value.LngTrendID + '" checked="checked" value="0" />&nbsp;<div 
        style="display:inline;">' + value.StrTrendName + '</div><br />');

            });
         } 
    });
}
$(document).ready(function () {
    load().done(function() {
        console.log($('#tools :checkbox')); // i know I don't get any thing here 
    });
});
于 2013-01-30T17:36:23.523 に答える
2

ログに何もない理由は、$.ajax が非同期であるためです (AJAX の最初の 'A' は 'Asynchronous' を表します)。つまり、load()関数を呼び出すと、呼び出しが開始されますが、戻りの前に呼び出しが戻るのを$.ajax待ちません(これが、実際に戻ったときに何をすべきかを知るためにand関数を指定する必要がある理由です)。$.ajaxload()successerror

コードがどのように実行されるかのタイムラインを確認できます。

  1. ロード（）
    1. $.ajax()
    2. リターン (ヌル)
  2. console.log()
  3. (不確定な時間の後で) success()

$.ajax()呼び出しからいつ戻ったかを知っているオブジェクトの型を返します。したがって.done()、オブジェクトを呼び出して、その関数でコードを実行し、success()が実行されるまで待機することができます。

したがって、呼び出しを返すと、新しく追加された入力$.ajaxを呼び出して操作できるようになります。.done()

function load() {
    return $.ajax({...});
}

$(document).ready(function () {
    load().done(function(){
        console.log($('#tools :checkbox'));
    });
});
于 2013-01-30T17:55:02.070 に答える