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

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

1 个答案: