jQuery - AJAX form double submission

Question

私はこの提出ハンドラを持っています。要求が行われると、複数のパートのリソースURL（指定されたIDを持つオブジェクトと子オブジェクトをパスの一部として参照する）を指すようにフォームが設​​定されています。フォームを送信すると、要求された要求が送信されるだけでなく、要求URLから削除された子オブジェクトのIDと名前の2番目の要求も行われます。

TL; DR：/foo/1/bar/2に、その後/foo/1にリクエストします。その2回目のリクエストを停止する必要があります。

私は標準event.preventDefault()を使用して、return falseを投じて測定しました。ここでは見られませんが、私は別のSOの答えをどこかで見てきたので、$form.submit(false)も試しましたが、それは悪く見えて、とにかく動作しなかったので削除しました。

function submitForm(e) { 
    e.preventDefault(); 

    var $form = $(e.target); 

    $form.find('[type="submit"], [type="button"]').prop('disabled', true); 

    var formData = { 
     // data 
    }; 

    $.ajax({ 
     url: $form.prop('action'), 
     method: ($form.find('[name="_method"]').val() || $form.prop('method')), 
     data: formData, 
     error: function(response, status) { 
      console.log(response); 
     }, 
     success: function(response, status) { 
      console.log(response); 
     }, 
     complete: function() { 
      $form.find('[type="submit"], [type="button"]').prop('disabled', false); 
     } 
    }); 

    return false; 
} 

$(document).ready(function(){ 
    $('#myform').on('submit', submitForm); 
}); 

AJAXコールを削除するとどこかに問題があると思うので、フォームの送信が予期したとおりに停止します。 AJAX呼び出し自体が実際に2つの要求を出す可能性もあると思いますが、それがなぜそれを行うのかはわかりません。また、ユーザーがエンターキーを押しても、送信ボタンを積極的にクリックしても起こっているようです。

Answer 1

2つの発信HTTPリクエストが表示されていたため、応答がうまくいきませんでした。

最初のリクエストは3xxのステータスコードで戻ってきたので、jQueryは最初のレスポンスでリダイレクトされたURLに2番目のクエリを実行していました。

私はAJAX要求に異なる応答を送信するために、コントローラの変更時になるよう、適切にAJAXリクエストを処理していなかった使用していたサービス・コントローラは、私はもはや問題を取得していないのです。

Answer 2

提出リクエストに2回サブスクライブする可能性があります。したがって、イベントのダブルトリガーとなります。バインドする前にまずバインドを解除するようにしてください。

$(document).ready(function(){ 
    $('#myform').off('submit').on('submit', submitForm); 
}); 

バインド解除/バインドを併用することをおすすめします。これは同じことですが、unbindの代わりにoffを使用します。

また、スクリプトをページに2回追加している可能性もあります。確認してください。