почему после POST запроса создается GET запрос?

Question

почему после POST запроса создается GET запрос?

Рейтинг: 1Ответов: 1Опубликовано: 11.02.2023

Не могу понять почему после успешной обработки POST запроса создается GET запрос.

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <input type="text" name="header">
            <textarea name="description"></textarea>
            <button onclick="_send_entry()">submit</button>
        </form>
        <script src="../../test.js"></script>
    </body>
</html>

js

function _send_entry() {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/test');
    xhr.send();
    xhr.onload = function() {
        if(xhr.status != 200)
            alert(`error - ${xhr.status}`);
        else
            alert(`получено байт - ${xhr.response.length}`);
    };
}

php

case 'test':
    echo "hello";
    break;

Ввод

Ответ

Вывод

После отпраки формы идет перезагрузка страницы. Что я могу сделать чтобы GET запрос не формировался и страница не перезагружалась?

javascript html php ajax

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

При таком html как у тебя, помимо твоего запроса, запрос отправляет и форма. Поскольку у тега form нет атрибута method - это GET.

После ее отправки, поскольку у тега form нет атрибута action (значит текущая страница), страница перезагружается.

Для предотвращения такого "дефолтного срабатывания" формы в обработчик нужно добавить отмену "действия по умолчанию".

function _send_entry(event) {
    // отмена действия по умолчанию
    event.preventDefault();
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/test');
    xhr.send();
    xhr.onload = function() {
        if(xhr.status != 200)
            alert(`error - ${xhr.status}`);
        else
            alert(`получено байт - ${xhr.response.length}`);
    };
}

Более подробно можно почитать тут https://doka.guide/js/event-prevent-default/

почему после POST запроса создается GET запрос?

Ответы