如何防止 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}]

Answer 1

如果上面的代碼與您在頁面中的代碼完全相同，那么您錯誤地實現了$(document).ready()處理程序。 您需要將代碼放入 function 並將其添加為參數，如下所示...

$(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 調用。