3

我在提交 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 提交的一个已知问题，还是我遗漏了一些明显的东西？是否可能发生某种形式的递归？

谢谢。

4

3 回答 3

6

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

于 2010-08-17T14:38:54.060 回答
2

当你这样做时

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

您正在将功能添加到submit事件中。当您单击submit按钮时，您将添加一个 thisfunction并通过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>
于 2010-08-17T14:43:50.053 回答
0

改变

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

到

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

< input type="submit"> 是导致双重提交的原因。

于 2010-08-17T14:39:33.857 回答