Почему HTTP-AJAX-запрос отправляется два раза?

Question

[Vadim Rublev]

Почему HTTP-AJAX-запрос отправляется два раза? Форму отправляю без данных.
Кроме того, (если не обновлять страницу) при каждом последующем нажатии кнопки отправки, количество запросов увеличивается на один. При втором нажатии - три запроса уйдут, при третьем - четыре, и т. д.
Ванильный JS и Go-сервер (самописный).
Я догадываюсь, что два раза запрос идёт из-за наличия submit и потом ещё xhr.send()... Но как правильно?

Код мой:
HTML:

<form id="id_Form">
    <button id="id_button" onclick="ClickButton()">Ok</button>
</form>

JS:

function ClickButton() {
    let myForm = document.querySelector('#id_Form');
    myForm.addEventListener('submit', function(event) {
        event.preventDefault();
		
        // Здесь кнопка нажимается только если она активна. В HTML убрал класс, для упрощения.
        if (this.querySelector('#id_button').classList.contains('butt_Activ')) {
            let xhr = new XMLHttpRequest();   // Создан AJAX-транспорт.
            let formData = new FormData(myForm);   // Создан новый Объект-FormData.

            // При завершении запроса:
            xhr.onloadend = function() {
                if (xhr.status === 200) {
                    _ При успешном ответе сервера - вставляем ответ как значение в кнопку. _
                    return;
                } else {
                    _ При ошибке запроса - сообщение об ошибке. _
                    return;
                }
            }

            xhr.open('POST', '/my_form');
            xhr.send(formData);
        }	    
    });
}

Comments

[di]

Ну вы ж при каждом нажатии добавляете обработчик
myForm.addEventListener после каждого нажатия добавляет еще один обработчик на форму

[di]

htmlbook.ru/html/button/disabled

<form id="id_Form">
    <button type="submit"  disabled>Ok</button>
</form>

let myForm = document.querySelector('#id_Form');
    myForm.addEventListener('submit', function(event) {
        event.preventDefault();
            let xhr = new XMLHttpRequest();   // Создан AJAX-транспорт.
            let formData = new FormData(myForm);   // Создан новый Объект-FormData.

            // При завершении запроса:
            xhr.onloadend = function() {
                if (xhr.status === 200) {
                    _При успешном ответе сервера - вставляем ответ как значение в кнопку.
                    return;
                } else {
                    _При ошибке запроса - сообщение об ошибке.
                    return;
                }
            }

            xhr.open('POST', '/my_form');
            xhr.send(formData);  
    });

[Vadim Rublev]

> myForm.addEventListener после каждого нажатия добавляет еще один обработчик на форму
Ну чо он такой глупый!? ))

disabled нельзя в кнопку ставить. Ибо тогда она недоступна для событий мыши; я у меня при наведении курсора (нетерпеливым юзером в попытке кликнуть) на неактивную кнопку высвечивается сообщение, что "так нельзя".

Смысл понятен.
Но надоумьте - как связать ( без функции ClickButt() ) код в JS-файле с HTML? (Ясно, что если вставить скриптом в HTML, то заработает.)

[di]

Vadim Rublev, https://learn.javascript.ru/introduction-browser-events

[di]

Vadim Rublev, просто сделайте так

let myForm = document.querySelector('#id_Form');
myForm.addEventListener('submit', function(event) {
        event.preventDefault();
    
        // Здесь кнопка нажимается только если она активна. В HTML убрал класс, для упрощения.
        if (this.querySelector('#id_butt').classList.contains('butt_Activ')) {
            let xhr = new XMLHttpRequest();   // Создан AJAX-транспорт.
            let formData = new FormData(myForm);   // Создан новый Объект-FormData.

            // При завершении запроса:
            xhr.onloadend = function() {
                if (xhr.status === 200) {
                    _При успешном ответе сервера - вставляем ответ как значение в кнопку.
                    return;
                } else {
                    _При ошибке запроса - сообщение об ошибке.
                    return;
                }
            }

            xhr.open('POST', '/my_form');
            xhr.send(formData);
        }	    
    });

Вместо

function ClickButt() {
    let myForm = document.querySelector('#id_Form');
    myForm.addEventListener('submit', function(event) {
        event.preventDefault();
    
        // Здесь кнопка нажимается только если она активна. В HTML убрал класс, для упрощения.
        if (this.querySelector('#id_butt').classList.contains('butt_Activ')) {
            let xhr = new XMLHttpRequest();   // Создан AJAX-транспорт.
            let formData = new FormData(myForm);   // Создан новый Объект-FormData.

            // При завершении запроса:
            xhr.onloadend = function() {
                if (xhr.status === 200) {
                    _При успешном ответе сервера - вставляем ответ как значение в кнопку.
                    return;
                } else {
                    _При ошибке запроса - сообщение об ошибке.
                    return;
                }
            }

            xhr.open('POST', '/my_form');
            xhr.send(formData);
        }	    
    });
}

Вы вешаете на кнопку обработчик, в котором добавляете обработчик на отправку формы. А вам достаточно просто повесить обработчик на отправку формы. смекаете?

[Vadim Rublev]

В [читанной] статье везде _script_ _/script_. Я правильно понял, что надо JS-код записать в HTML?

[di]

Vadim Rublev, вам надо с основ начинать. до событий вы еще не доросли. Если вы не знаете как даже подключаются js скрипты вам рано

[di]

Vadim Rublev, уберите уже GO из вопроса, его здесь нет

[Vadim Rublev]

Я сделал так.
Не работает.

[Vadim Rublev]

Смекаю.
Просто скажите, как связать HTML-файл с JS-файлом без применения функции() ? Или скажите, что надо JS-код вставить в HTML-файл в тегах _script_.

Answer 1

[David King]

Как указал пользователь di, у вас есть событие onclick="" для #id_butt (butt с английского переводится как жопа), которое вызывает функцию от #id_Form, проверяющую нажатие кнопки и именно из-за этого у вас и дважды команда отправляется.

Comments

[Vadim Rublev]

И как быть?

[David King]

Vadim Rublev, вот:

function buttonClicked() {
            if (this.querySelector('#id_butt').classList.contains('butt_Activ')) {
            let xhr = new XMLHttpRequest();   // Создан AJAX-транспорт.
            let formData = new FormData(myForm);   // Создан новый Объект-FormData.

            // При завершении запроса:
            xhr.onloadend = function() {
                if (xhr.status === 200) {
                    _При успешном ответе сервера - вставляем ответ как значение в кнопку.
                    return;
                } else {
                    _При ошибке запроса - сообщение об ошибке.
                    return;
                }
            }

            xhr.open('POST', '/my_form');
            xhr.send(formData);
}

В html уже указано, что при нажатии на кнопку выполняется функция, так что остается только написать нужный код в функцию. А название функции можете поменять.

[Vadim Rublev]

Во множестве обсуждений написано, что только блокировка submit'а (ну либо не именно submit'а) preventDefault()'ом предотвратит обновление страницы. И это правда.

[David King]

Vadim Rublev, в таком случае используйте не <input>, а <button>.

[Vadim Rublev]

Я и использую. (Именно отсюда взялась butt-жопа.)
Решил всё. По заветам di.

[Vadim Rublev]

А вот нужен ли в конце return?
После xhr.send(formData); ? Или после }); ?