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

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

3 голосов
/ 17 августа 2010

Я столкнулся с проблемой с отправкой форм 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 или я упускаю что-то очевидное?Возможно, имеет место какая-то форма рекурсии?

Спасибо.

Ответы [ 3 ]

6 голосов
/ 17 августа 2010

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

2 голосов
/ 17 августа 2010

Когда вы делаете это 

$(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>
0 голосов
/ 17 августа 2010

Изменить 

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

на 

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

- это то, что вызывает двойную передачу.

...