Как предотвратить сброс изменений в dom по запросу ajax

Question

Я создаю веб-приложение с Django. Я уже реализовал 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.