Отправить запрос POST в REST API через JavaScript

Question

Во-первых, я где-то читал, что мы не должны использовать XMLHttpRequest.

Во-вторых, я новичок в Javascript.

В-третьих, я создал веб-страницу для отправки электронной почты и пароля.

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="submit" onclick="check()" name="Submit"><b>Submit</b></button>
</form>

Моя функция проверки

function check() {        
    document.getElementById('message').innerHTML = "checking";
    const url = "https://<hostname/login";
    const data = {
        'email' : document.getElementById('email').value,
        'password' : document.getElementById('password').value
    };

    const other_params = {
        headers : { "content-type" : "application/json; charset=UTF-8" },
        body : data,
        method : "POST",
        mode : "cors"
    };

    fetch(url, other_params)
        .then(function(response) {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error("Could not reach the API: " + response.statusText);
            }
        }).then(function(data) {
            document.getElementById("message").innerHTML = data.encoded;
        }).catch(function(error) {
            document.getElementById("message").innerHTML = error.message;
        });
    return true;
}

Этот код не работает и просто перенаправляет меня на одну и ту же страницу снова и снова.

Пожалуйста, помогите мне понять, чтоя делаю не так.

Answer 1

просто сходит с моей головы, но вы установили Content-Type в application/json в заголовках, но ваше тело не является строкой JSON

попробуйте настроить ваше тело в соответствии с заголовками,делать

const other_params = {
  headers : { "content-type" : "application/json; charset=UTF-8"},
  body : JSON.stringify(data),
  method : "POST",
  mode : "cors"
};

РЕДАКТИРОВАТЬ

Итак, перечитав ваш вопрос, я думаю, что происходит, вы установили button для типа submit и что происходит, когда вы нажимаете на кнопку, ваша форма публикуется через старые добрые сообщения формы, а ваша страница обновляется после обратной передачи.

Если вы хотите обрабатывать сообщения формы самостоятельно, используя fetch,измените тип кнопки на button, и форма больше не должна публиковаться, тогда все остальное будет обработано вашим обработчиком события нажатия.

ps.пока вы на нем, вы также можете удалить атрибут method и onsubmit из тега формы

Таким образом, ваша форма должна выглядеть примерно так

<form>
    <p><b>Login</b></p>
    <input type="email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="button" onclick="check()" name="Submit"><b>Submit</b></button>
</form>

Answer 2

В вашем коде были некоторые ошибки, поскольку я проверил, пожалуйста, используйте его следующим образом

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" id = "email" name="email" placeholder="Email" required>   
    <input type="password" name="password" placeholder="Password" id='new_password' >
    <span id='message'>{{msg}}</span>
    <button type="submit" onclick="check(event)" name="Submit"><b>Submit</b>  </button>
</form>
<script>
    function check(event) {
        event.preventDefault();
        document.getElementById('message').innerHTML = "checking";

        const url = "https://hostname/login";
        const data = {"email" : document.getElementById('email').value,
                    'password' : document.getElementById('new_password').value
                    };
        const other_params = {
            headers : { "content-type" : "application/json; charset=UTF-8"},
            body : data,
            method : "POST",
            mode : "cors"
        };

        fetch(url, other_params)
            .then(function(response) {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error("Could not reach the API: " + response.statusText);
            }
        }).then(function(data) {
            document.getElementById("message").innerHTML = data.encoded;
        }).catch(function(error) {
            document.getElementById("message").innerHTML = error.message;
        });
        return true;
    }
  </script>

Затем проверьте, изменив URL своего поста, чтобы исправить один, работающий или нет, для дальнейшего тестирования используйте браузеринструмент инспектора для просмотра вашего запроса AJAX.

Я также поставил его на скрипку для тестирования в реальном времени http://jsfiddle.net/rajender07/xpvt214o/903616/

Спасибо

Answer 3

Во-первых, я хотел бы понять, что является вашим объектом после получения данных из REST API.

Во-вторых, в html-коде также есть ошибки, вам не нужно добавлять onclickна кнопке отправки, когда там уже есть onsubmit в элементе формы.

Решение, измените onsubmit="check(event);"

function check(e) { e.preventDefault() ... } // you can remove the return true

Answer 4

1) Ваша функция проверки всегда возвращает true
2) Когда вы используете fetch..then, ее обещания могут быть выполнены позже, чем инструкция возврата

Таким образом, ваша форма будет обновленаопять и опять.Вы должны вернуть значение false и вручную отправить форму с JavaScript, когда получите ответ onSuccess.

<script>
    function check(event) {
        document.getElementById('message').innerHTML = "checking";

        const url = "https://localhost:8080/login";
        const data = {
            'email' : document.getElementById('email').value,
            'password' : document.getElementById('new_password').value
        };
        const other_params = {
            headers : { "content-type" : "application/json; charset=UTF-8" },
            body : data,
            method : "POST",
            mode : "cors"
        };

        fetch(url, other_params)
            .then(function(response) {
                if (response.ok) {
                    alert(response.json());
                } else {
                    throw new Error("Could not reach the API: " + response.statusText);
                }
            }).then(function(data) {
                document.getElementById("message").innerHTML = data.encoded;
            }).catch(function(error) {
                document.getElementById("message").innerHTML = error.message;
            });
        return false;
    }
</script>

<form method="POST" onsubmit="return check();">{% csrf_token %}
    <p><b>Login</b></p>
    <input type="email" id = "email" name="email" placeholder="Email" required></input>
    <input type="password" name="password" placeholder="Password" id='new_password' ></input>
    <span id='message'>{{msg}}</span>
    <button type="submit" name="Submit"><b>Submit</b></button>
</form>

Обновление:

Страница не обновлена, сообщение об ошибкеотображается: