XMLHttpRequest получает 2 ответа с помощью onReadyStateChange

Question

Как это выглядит в настоящее время?

У меня есть страница профиля, которая делает запрос POST при загрузке на сервер для получения данных профиля от пользователя.Он помещает эти данные во входные данные, чтобы пользователь мог их изменить.Затем внизу у меня есть кнопка, которая отправляет данные из этой формы обратно на сервер, чтобы обновить данные от пользователя.Теперь я хочу отправить клиенту подтверждение, чтобы уведомить пользователя об успешном обновлении данных.Так вот как это выглядит в настоящее время.

On page load:
client -> server (post the userid)
server -> client (send the user data corresponding to the userid)
On button press:
client -> server (post the new user data)
server -> client (confirmation of the update)

Что я использую?

Я использую JavaScript на стороне клиента.На стороне сервера Я использую Node.js с экспрессом.

Проблема и код

То, что происходит при загрузке страницы, работает отлично.Последний ответ от сервера клиенту отправляет json с {Type: 1}, и он печатает это буквально в браузере, а это не то, что я хочу, я думаю, это потому, что XMLHttpRequest не запускается второй раз.Я хочу уловить это, чтобы я мог сделать соответствующий ответ.

var xhp = new XMLHttpRequest();
xhp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        if (data.type == 0) {
            console.log(data);
            createProfileDiv(data);
        } else if (data.type == 1) {
            alert("Successfully edited your profile");
        }
    }
};
xhp.open("POST", "getProfile", true);
xhp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhp.send("id=" + getCookie("userId"));

Это код страницы профиля.Я пытаюсь с помощью этого кода изменить разницу между data.type, поэтому 0 - это получение данных профиля, а 1 - получение успешного сообщения.

exports.getProfile = function(req, res) {
    let db = new sqlite3.Database('database', sqlite3.OPEN_READ, (err) => {
        if (err) {
            console.error(err.message);
        }
    });

    var profile = {};
    db.get(`SELECT * FROM Customers WHERE customer_id = (?);`, [req.body.id], (err, row) => {
        if (err) {
            console.error(err.message);
        }
        profile = row;
    });

    db.close((err) => {
        if (err) {
            console.error(err.message);
        } else {
            profile.type = 0;
            res.send(profile);
        }
    });
}

exports.updateProfile = function(data, res) {
    let db = new sqlite3.Database('database', sqlite3.OPEN_READ, (err) => {
        if (err) {
            console.error(err.message);
        }
    });
    db.get('UPDATE Customers SET name=(?), password=(?), email=(?), address=(?), city=(?), zip_code=(?), birthdate=(?) WHERE email=(?);',
    [data.body.name, data.body.password, data.body.email, data.body.address, data.body.city, data.body.zipcode, data.body.birthdate, data.body.email],
    (err, row) => {
        if(err) {
            return console.log(err.message);
        }
    });
    db.close((err) => {
        if (err) {
            console.error(err.message);
        } else {
            var obj = {type: 1};
        res.status(200);
        res.send(obj);
        }
    });
}

Первая функция getProfileполучает данные из базы данных и затем отправляет их вместе с типом 0 клиенту. Вторая функция «updateProfile» обновляет данные из базы данных, а затем отправляет сообщение типа 1 клиенту в качестве подтверждения того, что обновление прошло успешно.То, что я буквально получаю на стороне клиента, - это белая страница с надписью: "{type: 1}", но onreadystatechange не вызывается?

Вопрос

Итак, мой вопрос.Я делаю что-то совершенно глупое, если да, то как мне это сделать?Иначе, почему мой onreadystatechange не вызывается во второй раз для запроса updateprofile?

Answer 1

Спасибо за Charlietfl за этот ответ. Я сделал это, запретив отправку формы по умолчанию и отправив запрос с помощью xmlhttprequest.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        if (data.type == 0) {
            createProfileDiv(data);
            changeSubmitFunction();
        } else if (data.type == 1) {
            console.log("jaaaa1");

        }
    }
};
xmlhttp.open("POST", "getProfile", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("id=" + getCookie("userId"));

function changeSubmitFunction() {
    var form = document.getElementById("profile-form");
    form.onsubmit = function(e) {
        e.preventDefault();
        xmlhttp.open("POST", "updateProfile", true);
        xmlhttp.setRequestHeader("Content-Type","application/JSON");
        var formData = new FormData(form);
        let reqBody = {};
        for (let entry of formData.entries()) {
            reqBody[entry[0]] = entry[1];
        }
        xmlhttp.send(JSON.stringify(reqBody));
        return false;
    }
}