Отправка формы с помощью JQuery Ajax приводит к нескольким запросам (и отправкам)

Я столкнулся с проблемой отправки форм JQuery и нигде не нашел ответов. Если бы кто-то мог пролить свет на это, это было бы очень признательно.

Проблема: когда я впервые отправляю форму, она работает нормально. Но если я отправлю ту же форму во второй раз, она отправит 2 запроса, 3 запроса в третий раз и т. д.

Скрипт:

    function postInvokeFunctionForm(functionId){
      var formId = "#"+functionId+"-form";
      var formUrl = "invokeFunction.html?functionId="+functionId
      $(formId).submit(
        function(){
            $.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }
        );
   }

Динамически генерируемая форма:

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">
</form>

Это явно нежелательно. Единственное решение, которое я могу придумать, это id для повторного рендеринга (динамически сгенерированной) формы после отправки, но это была бы дорогостоящая операция.

Это известная проблема с отправкой JQuery ajax или я упустил что-то очевидное? Возможно, имеет место какая-то форма рекурсии?

Спасибо.


jquery ajax recursion form-submit onsubmit
person Aamir    schedule 17.08.2010    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Каждый раз, когда вы нажимаете кнопку, код вызывает вашу функцию. В этой функции строка $(formId).submit(...); связывает событие с действием отправки формы. Это происходит каждый раз, когда вы нажимаете, добавляя в форму несколько событий «отправить». Сначала вам нужно отвязать действие. Так что вместо этого вы можете позвонить $(formId).unbind('submit').submit(...);.

person Paul Hadfield    schedule 17.08.2010
comment
Спасибо, это все еще свежо в моей памяти после того, как я кодировал и страдал от чего-то подобного в начале недели :) - person Paul Hadfield; 17.08.2010

arrow_upward
2
arrow_downward

Когда ты это сделаешь

$(formId).submit(function(){})

Вы добавляете функцию к событию submit. Когда вы нажимаете кнопку submit, вы добавляете это function и отправляете через поведение по умолчанию input type="submit". При повторном нажатии вы добавляете то же самое function к событию submit. Поэтому, когда вы щелкаете один раз, у вас есть один function в событии submit, когда вы щелкаете два раза, у вас есть два functions.

Тем не менее, вы можете делать то, что хотите, вот так:

$('#inputInvokeId').submit(function(){
var formUrl = "invokeFunction.html?functionId="+inputInvokeId;
$.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }

})

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" id="inputInvokeId" type="submit">
</form>
person Daniel Moura    schedule 17.08.2010
comment
Отличное объяснение! Это все объясняет! Я пойду попробую. - person Aamir; 19.08.2010

arrow_upward
0
arrow_downward

Изменять

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">

to

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="button">

‹ input type="submit" > вызывает двойную отправку.

person Rouan van Dalen    schedule 17.08.2010
comment
Это может быть причиной, если у вас каждый раз была двойная отправка, но, как указано в вопросе, выделенном жирным шрифтом, количество представлений начинается с 1 и увеличивается на один каждый клик, что выглядит как проблема привязки нескольких событий. - person Paul Hadfield; 17.08.2010
comment
Множественная привязка события — правильный ответ да. Тем не менее, рекомендуется изменить кнопку отправки, если вы используете javascript для отправки формы. - person Rouan van Dalen; 17.08.2010