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

Question

我正在用 Django 构建一个 Web 应用程序。我已经用 rest 框架实现了一个 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}]javascript

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 调用。如果将它部署到实时环境中，您可能永远不会注意到它，但是在 localhost 上运行它意味着它运行得足够快，可以立即完成 ajax 调用。