Question

使用以下代码：

function create_table() {
    $.ajax({
        method: "GET",
        url: "/api/data/",
        success: function(data){
            $('#table').load('http://127.0.0.1:8000/results');
            $('#go_back').remove();
        },
        error: function(error_data){
            console.log("errorrr")
            console.log(error_data)
        }
    })
}
document.getElementById("create_table").onclick = function() {
    create_table();
    return false;
}

我想在加载#go_back元素后删除#table元素。问题是它没有被删除，因为代码不会等待#go_back出现。

如何让脚本在.load和.remove方法之前等待？

Answer 1

您遇到的问题是load函数是异步的，而您调用的remove函数是同步的。事件的粗略顺序如下。

执行AJAX请求
AJAX请求返回成功
成功回调称为
load函数对localhost进行第二次异步调用，将结果加载到标识为table
＆＃39; loading＆＃39;功能需要一些时间才能完成
在此期间，remove函数被称为
remove函数检查DOM（文档对象模型）是否有匹配ID go_back的元素
找不到匹配元素，因为load函数尚未返回
load函数返回，并填充表元素的内部HTML

您的问题的解决方案是要了解在加载函数返回后，必须对进行对表元素内容的任何更改。这是通过查阅jQuery文档jQuery Load来完成的，以了解如何为完成load函数设置钩子。这个修改应该实现你想要的：

＆＃13;
＆＃13;
$('#table').load('http://127.0.0.1:8000/results', function(){ $('#go_back').remove(); });
＆＃13;
＆＃13;
＆＃13;

本质上，将第二个参数传递给load函数，这是另一个回调函数。在这个回调函数中，任何代码都将在修改表元素的内部内容后执行。因此，应找到并删除go_back元素。

Answer 2

JQuery load()函数中有一个回调函数，在加载完成时触发。因此，将该代码放在回调中，该回调仅在load()操作完成后执行。

function create_table() {
    $.ajax({
        method: "GET",
        url: "/api/data/",
        success: function(data){
            $('#table').load('http://127.0.0.1:8000/results', function(){
              $('#go_back').remove();
            });
        },
        error: function(error_data){
            console.log("errorrr")
            console.log(error_data)
        }
    })
}
document.getElementById("create_table").onclick = function() {
    create_table();
    return false;
}

Answer 3

.load函数实际上创建了一个Ajax调用。您正在使用Ajax来获取数据＆＃39;，不执行任何操作，然后使用另一个Ajax调用来获取我认为是某些HTML的结果。

您可以使用Ajax函数根据数据填充html而不是再次调用。

我不确定.load是否有.done功能。但如果有，你可以删除那里的元素。

或者，您可以保持原样并将.load函数更改为正确的Ajax调用，并在success func中填充表html，同时删除元素。

等待jquery加载HTML，然后删除项目

3 个答案: