Как избежать дублирования post при отправке формы через ajax?

Question

[runapa]

При отправке формы через ajax у меня даггые отправляются на сервер и закрывается модальное окно. Если же открыть его заново и снова отправить форму, браузер показывает, что post запрос удваивается. То есть отправляется старый и новый пост запрос. Как сделать правильно?

Comments

[Михаил Р.]

Как сделать правильно?

Добавить код к вопросу?

[AlexVWill]

Михаил Р., это для лохов, настоящий пацан ждёт прихода телепатов

[runapa]

function addModification(){

        const myForm = document.getElementById('Form');

        myForm.addEventListener('submit', function (event) {
            // Отменяем стандартное поведение формы
            event.preventDefault();

            // Получаем данные из формы
            const formData = new FormData(myForm);

            // Отправляем данные на сервер
            fetch('/cp/catalog/products/edit-product/<?=$pid;?>', {
                method: 'POST',
                body: formData,
            })
                .then((response) => {
                    // Обрабатываем ответ от сервера
                    myForm.reset();
                    $('#addModificationModal').modal('hide');
                    console.log(response);
                })
                .catch((error) => {
                    // Обрабатываем ошибку
                    console.error(error);
                });
        });
    }

На сервере стандартный php код.
Форма самая типичная - три поля и добавление файла

[VolgaVolga]

А точно POST запрос дублируется? Может, первым идет Preflight?

[runapa]

VolgaVolga,

XHRPOST
cp/catalog/products/edit-product/e31cfff6
[HTTP/1.1 200 OK 35ms]

Response { type: "basic", url: "cp/catalog/products/edit-product/e31cfff6", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(10), body: ReadableStream, bodyUsed: false }
e31cfff6:532:29
XHRPOST
catalog/products/edit-product/e31cfff6
[HTTP/1.1 200 OK 76ms]

XHRPOST
catalog/products/edit-product/e31cfff6
[HTTP/1.1 200 OK 34ms]

Response { type: "basic", url: "cp/catalog/products/edit-product/e31cfff6", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(10), body: ReadableStream, bodyUsed: false }
e31cfff6:532:29
Response { type: "basic", url: "cp/catalog/products/edit-product/e31cfff6", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(10), body: ReadableStream, bodyUsed: false }

[Parit]

А вызов функции точно не дублируется?

Answer 1

[MrColdCoffee]

У вас при каждом открытии модалки на myForm вешается обработчик(допом к имеющемуся)...

Comments

[runapa]

А как этого избежать?

[alexalexes]

Вешать обработчик на форму при загрузке страницы, либо при физическом создании формы, если сайт работает в режиме одностраничника.
Либо вешать обработчик в единичном экземпляре:
myForm.submit = function (event) {...
Либо выносим где-то глобально функцию в переменную, и навешиваем обработчик, когда добавляем событие, и убираем обработчик, когда закрываем окно:

let form_submit = function (event) {...};

function addModification(){
...

myForm.addEventListener('submit',  form_submit);
...
}

function closeModalFrom()
{
....
myForm.removeEventListener('submit',  form_submit);
....

}

[runapa]

Всё получилось!

Answer 2

[AUser0]

Правильно будет найти причину удвоения, и исправить её. Всё!