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 

    });

我知道我对 console.log 行没有任何了解，因为该行是在 ajax 函数之前调用的

问题我如何先加载ajax函数我虽然当我这样做时$(document).ready()它会最后运行谢谢

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”代表“异步”）。这意味着当您调用load()函数时，它会触发$.ajax调用，但不会等待$.ajax调用在返回之前load()返回（这就是为什么您必须指定 asuccess和error函数以便它知道在实际返回时要做什么）。

我们可以查看您的代码如何执行的时间表：

  1. 加载（）
    1. $.ajax()
    2. 返回（空）
  2. 控制台.log()
  3. （一段时间后）成功（）

$.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 回答