Почему браузер отсылает дополнительный AJAX-запрос на сервер?

Question

[Vadim Rublev]

Есть форма с двумя полями_ввода.
При нажатии кнопки AJAX-транспортом отправляю POST-запросом на сервер значения из этих полей.

<form>
    <input type="text" name="a" id="idField_1" />
    <br>
    <input type="text" name="b" id="idField_2" />

    <button onclick="sendData()">Тест!</button>
</form>
<script>
    function sendData() {
        let a = document.getElementById("idField_1").value;   // Взято значение поля_1.
        let b = document.getElementById("idField_2").value;   // Взято значение поля_2.
        let xhr = new XMLHttpRequest();   // AJAX-транспорт.
        xhr.open('POST', '/myRout', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b));   // Отправляем POST-запрос с данными в_строку.
        return;
    }
</script>

Но, помимо POST-данных в теле запроса, появляются данные в URL'е (как GET-запрос).
И на сервер приходят два запроса (либо один запрос два раза). Один из них - с пустыми данными (это тот самый произвольный-браузерный GET-запрос, видимо).
Как избежать двойного запроса на сервер и появления GET-запроса в URL?

Comments

[Вадим]

1) Зачем вам секция script внутри тэга form?
2) Любая кнопка внутри формы без указанного type считается как type="submit"
3) Если Вы отправляете форму через js, то нужно делать preventDefault.

[Сергей delphinpro]

вы же форму отправляете. Зачем клики ловить?
<form onsubmit="sendData();return false;">

или по вашему:

<button onclick="sendData();return false;">Тест!</button>

[Vadim Rublev]

Понятно. Спасибо!
script, конечно, вне form. Поправил.
Ловил клик, чтобы избежать submit, думал так можно и проще. Про тип submit по умолчанию не знал. Про preventDefault знаю; думал сделать попроще.

Answer 1

[Андрей Ежгуров]

Потому, что внутри обработчика события не блокируется установленный браузером обработчик события submit по умолчанию, который и отправляет форму второй раз. Свой обработчик надо сажать не на click, а на submit (onsubmit), а обработчик по умолчанию отключать так: https://learn.javascript.ru/default-browser-action

А т.к. атрибут method в теге form не установлен, то обработчик по умолчанию отправляет форму методом GET.

Comments

[Vadim Rublev]

Т. е. любую отправку HTTP-запроса браузер обязательно трактует как submit?
Не знал...
Но это только для формы? Если такое сделать с блоком-div, то запрос уйдёт один?

[Андрей Ежгуров]

Vadim Rublev, Это только для формы. И событие submit есть только у формы. Для div - да, обыкновенный click и никаких дополнительных действий.

[Сергей delphinpro]

Vadim Rublev,

Т. е. любую отправку HTTP-запроса браузер обязательно трактует как submit?

Ничего он не трактует. Вы нажали кнопку - отправился ваш запрос. Но также отправилась и форма, стандартным образом, потому что вы никак не заблокировали ее отправку.
в вашем случае это можно сделать вернув false из онклика кнокпи, из onsubmit формы или сделав кнопку не сабмитной (type=button).
Но лучше слушать событие onsubmit на самой форме. Ведь форму можно отправить не только кликом по кнопке но и нажав enter на клавиатуре.

[Vadim Rublev]

Не знал, что <button> имеет по умолчанию тип submit! ЧуднО...
Понятно. Спасибо! )