javascript - 如何防止 dom 更改在 ajax 请求时重置

Question

我正在使用 Django 构建一个 Web 应用程序。我已经使用其余框架实现了 API。

这是我用来连接到我的 API 的代码:

$(document).ready()

            $.ajax ({
                url: "http://localhost:8000/main_api/Waffel",
                type: "GET",
                dataType: "json",
                success: function(res) {
                        document.getElementById("Einzelne1").innerHTML = res[0].anzahl;
                        document.getElementById("Einzelne2").innerHTML = res[1].anzahl;
                        document.getElementById("Einzelne3").innerHTML = res[2].anzahl;
                        document.getElementById("Einzelne4").innerHTML = res[3].anzahl;
                        console.log(res)                    
                }
            });

遗憾的是，这并没有改变我的主站点上的任何内容，唯一执行的是 console.log(res)。

一件有趣的事情是，当我将其添加到文件末尾并重新加载页面时，修改后的innerHTML实际上会在ajax请求完成后更改回来之前显示出来。

document.getElementById("Einzelne2").innerHTML = res[1].anzahl;
document.getElementById("Einzelne3").innerHTML = res[2].anzahl;
document.getElementById("Einzelne4").innerHTML = res[3].anzahl;

可以采取什么措施来防止这种情况发生？如果无法解决这个问题，还有什么其他方法可以从 API 加载数据，然后将其显示在 HTML 页面中。

编辑:

[{"id":3,"name":"Schokolade","anzahl":1},{"id":4,"name":"Zucker","anzahl":2},{"id":5,"name":"Zimt und Zucker","anzahl":3},{"id":6,"name":"Blauberre","anzahl":4}]

Answer 1

如果上面的代码与您页面中的代码完全相同，那么您就错误地实现了 $(document).ready() 处理程序。您需要将代码放入函数中并将其添加为参数，如下所示...

$(document).ready(function() {
    $.ajax ({
        url: "http://localhost:8000/main_api/Waffel",
        type: "GET",
        dataType: "json",
        success: function(res) {
            document.getElementById("Einzelne1").innerHTML = res[0].anzahl;
            document.getElementById("Einzelne2").innerHTML = res[1].anzahl;
            document.getElementById("Einzelne3").innerHTML = res[2].anzahl;
            document.getElementById("Einzelne4").innerHTML = res[3].anzahl;
            console.log(res)                    
        }
    });
});

因为您错误地实现了它，所以就绪处理程序没有执行任何操作，并且您的 ajax 调用在页面实际加载之前正在执行。如果您将其部署到实时环境中，您可能永远不会注意到它，但在本地主机上运行它意味着它运行得足够快，可以立即完成 ajax 调用。