如何在 $ 上创建 DOM 元素.Ajax(） Success using jquery .

How to create DOM elements on $.Ajax() Success using jquery ?

本文关键字：Ajax Success jquery using 元素 DOM 创建      更新时间：2023-09-26

我正在创建一个动态的checkbox列表$.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 
    });

我知道我对控制台.log行没有任何了解，因为 this 行是在 ajax 函数之前调用

的

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

返回 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 
    });
});

日志中没有任何内容的原因是 $.ajax 是异步的（AJAX 中的第一个"A"代表"异步"）。这意味着当你调用load()函数时，它会触发$.ajax调用，但在load()返回之前不会等待$.ajax调用返回（这就是为什么你必须指定一个success和error函数，以便它知道当它实际返回时该怎么做）。

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

  1. 加载（）
    1. $.ajax（）
    2. 返回（空）
  2. console.log（）
  3. （一些不确定的时间后） 成功（）

$.ajax()返回一种对象类型，该对象知道何时从调用中返回。因此，您可以对对象调用.done()并在该函数中执行代码，该代码将等到success()运行之后。

因此，如果您返回$.ajax调用，您将能够调用.done()并使用新添加的输入执行操作。

function load() {
    return $.ajax({...});
}
$(document).ready(function () {
    load().done(function(){
        console.log($('#tools :checkbox'));
    });
});
相关文章：