3

JQuery フォームの送信で問題が発生しましたが、どこにも答えがありません。誰かがこれに光を当てることができれば、それは高く評価されます。

問題: 初めてフォームを送信すると、正常に機能します。しかし、同じフォームを 2 回目に送信すると、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 送信に関する既知の問題ですか、それとも明らかな問題がありませんか? おそらく何らかの形の再帰が行われているのでしょうか?

ありがとう。

4

3 に答える 3

6

ボタンをクリックするたびに、コードが関数を呼び出しています。その関数では、行$(formId).submit(...);はイベントをフォームの送信アクションにバインドしています。これはクリックするたびに発生し、複数の「送信」イベントがフォームに追加されます。最初にアクションのバインドを解除する必要があります。そのため、代わりに呼び出すことができます$(formId).unbind('submit').submit(...);。

于 2010-08-17T14:38:54.060 に答える
2

これを行うと

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

submitイベントに関数を追加しています。ボタンをクリックするとsubmit、 this が追加さfunctionれ、 のデフォルトの動作で送信されますinput type="submit"。もう一度クリックすると、同じfunctionことがsubmitイベントに追加されます。したがって、1 回クリックするとイベントに1 つfunction、 2 回クリックすると 2 つ存在します。submitfunctions

つまり、次のようにやりたいことができます。

$('#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 に答える