Ajax: почему почтовый запрос запускается дважды?

Question

Я заметил, что мой запрос выполняется дважды, но я не понимаю, почему.

У меня есть простая форма:

<form method="POST" class="mb-4" autocomplete="off" action="/recipe/add" novalidate id="form">
    <div class="form-group">
        <label for="title">Rezeptname</label>
        <input required type="text" name="title" id="title" class="form-control form-control-sm needs-validation" value="">
        <div class="invalid-feedback">Ein Name wird für das Rezept benötigt!</div>
    </div>

    <div class="form-group">
        <label for="cookingTime">Zubereitungsdauer in Minuten</label>
        <input type="number" name="cookingTime" id="cookingTime" class="form-control form-control-sm" value="">
    </div>

    <div class="form-group">
        <label for="servings">Portionen</label>
        <input type="number" name="servings" id="servings" class="form-control form-control-sm" value="">
    </div>

    <label for="ingredients">Zutaten</label>
    <button class="btn btn-outline-secondary btn-sm ml-2" onclick="createInputRow()"><i class="fas fa-plus"></i></button>

    <div class="mb-4" name="ingredients">
        <table class="table">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>


    <button type="submit" class="btn btn-primary btn-sm" id="submit">Speichern</button>
    <a href="javascript:history.back()" class="btn btn-secondary btn-sm">Zurück</a>
</form>

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

$(document).ready(() => {
    $("#submit").unbind("click").bind("click", event => {
        onSubmit(event)
    })
})

в методе onSubmit, запрос отправляется:

    $.ajax({
        type: "POST",
        url: "/recipe/add",
        data: {recipe: recipeData},
        success: (res) => {
            console.log(JSON.parse(res))
        }
    });

При сканировании сети я мог видеть, что запрос запускается дважды.

Это приводит к ошибке на моем сервере. При настройке точки останова во внешнем интерфейсе она срабатывает только один раз. Бэкэнд получает два запроса, как при сканировании сети.

Я уже пробовал $ ("# submit"). Unbind (). Bind (), как упоминалось в других источниках, но это не решает проблему.

Answer 1

В случае, если вы хотите использовать тег <form> для других целей (включая перенаправление) - вы должны удалить type=submit с кнопки отправки ИЛИ использовать preventDefault(), чтобы предотвратить действие формы по умолчанию. Также обратите внимание, что нажатие клавиши «Ввод» также может отправить форму в текстовом поле. Вы также можете использовать preventDefault() для предотвращения отправки формы во время этого действия.