如何防止 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 调用。