web-dev-qa-db-ja.com

jQuery AJAXフォーム送信は2回

JQueryを介してキャプチャし、AJAXを介して送信するフォームがあります。私の問題は、ページを更新するたびにフォームが複数回送信されることです。

送信ボタンのバインドを解除しようとしましたが、最初の送信後にフォームが正常に投稿されます。助けていただければ幸いです

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});
jqueryajaxsubmit
41
James Privett

おそらく、buttonまたはsubmitを使用してajaxイベントをトリガーしている可能性があります。これを試して：

$('#exportForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });
30
DevlshOne

PreventDefaultを呼び出すだけでなく、イベントでstopImmediatePropagationも呼び出します。

$('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});
105
Chris Sercombe

何らかの種類の検証（jQuery検証など）を使用している場合、自分で作成した$('#exportForm').submit以外に、検証プラグインはすべてのフィールドを正常に検証した後にフォームも送信するため、フォームは2回送信されます。

注意：jQuery Validationを使用している場合は、.submit()の使用を避けてください。代わりに、 submitHandler を使用してください。

11
ddanurwenda

単にe.stopImmediatePropagation();を使用できます：

例えば ​​：

$('#exportForm').submit(function(e){
    e.stopImmediatePropagation();
2
Gammer

Chris Sercombeが指摘したように、e.stopImmediatePropagation（）は機能し、問題を確実に修正しますが、使用する必要はありません。問題はまだコードのどこかに存在します。 2つの投稿リクエストを送信する方法の例を挙げます。

AngularJSを使用していて、「HandleAjaxController」というコントローラーを作成するとしましょう。このng-controllerをdivに割り当てた後、このng-controllerを誤って内部divに割り当てることができます。これにより、投稿リクエストが2回送信されます。そう：

    <div ng-controller='HandleAjaxController'>
        <div ng-controller='HandleAjaxController'>
            <button id="home" type="button" class="btn btn-success">Send data</button>

Ng-routeでコントローラーをここに設定していたので、これはかつて大きなストレスを引き起こしました：

    $routeProvider
    .when("/", {
        templateUrl : "src/js/partials/home.html",
        controller : "HandleAjaxController"
    })

そして、home.htmlで再度設定します：<div ng-controller='HandleAjaxController'>

とにかく、これは2つの投稿を送信する方法の一例です。

0
Adam

ほとんど同じ問題を抱えている人にとっては、jQueryイベントをfunction（）{}から制御する必要があると言えます。したがって、ajax POSTこの：

$(document).ready(function {
 $("#exportForm").click(function{
   $.ajax({
      type: "POST",
      url: "#", //your url
      data: data, //your variable
      success: function(){
        //do something here
      }
   });
 });
});

次のような2番目の関数を呼び出す関数ではありません。

$(document).ready(function {
 exportingForm();

 function exportingForm(){
   $("#exportForm").click(function{
     $.ajax({
        type: "POST",
        url: "#", //your url
        data: data, //your variable
        success: function(){
          //do something here
        }
     });
   });
 }
});
0
gutkol

指摘したいのは、同じクラスの要素が複数ある場合も同様です。

<button class="downvote">
  <img src="/img/thumbs-down.png" class="downvote">
</button>
0
Eddie

別のjsコードを確認する必要があります。2回「送信」イベントをトリガーする場合があります。私の場合、これは1つのボタンのonclickハンドラで「falseを返す」ことを忘れてしまいました

0
Vladimir Leonov

ここで回答したように、jquery.unobtrusive-ajax.min.js refを2回追加しました https://stackoverflow.com/a/15041642/4412545

0
Snziv Gupta