Question

我遇到了JQuery表单提交的问题，并且在任何地方都没有找到答案。如果有人能够对此有所了解，我们将非常感激。

问题：我第一次提交表单时，它运行正常。但如果我第二次提交相同的表格，它会发送2个请求，第3次发送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提交的已知问题还是我错过了一些明显的东西？是否有某种形式的递归发生？

感谢。

Answer 1

每次单击按钮时，代码都会调用您的函数。在该函数中，行$(formId).submit(...);将事件绑定到表单的提交操作。每次单击时都会发生这种情况，向表单添加多个“提交”事件。您需要先unbind行动。因此，您可以致电$(formId).unbind('submit').submit(...);。

Answer 2

当你这样做时

$(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>

Answer 3

更改

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

到

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

＆lt; input type =“submit”＆gt;是导致双重提交的原因。

使用JQuery Ajax提交表单会导致多个请求（和提交）

3 个答案: