0

私のフォームで [送信] を 2 回すばやくクリックすると、フォームの ajax 投稿が 2 回成功します。重複投稿を停止するにはどうすればよいですか?

私が言えることから

  1. ユーザーが送信をクリック
  2. Ajax投稿が送信されました
  3. ユーザーが送信をクリックする (入力済みで有効なフォーム)
  4. Ajax投稿が送信されました
  5. Ajax 応答を受信しました
  6. ページが空で更新されました (新しい空のフォーム - 値が必要です)
  7. Ajax 応答を受信しました
  8. ページが空で更新されました (新しい空のフォーム - 値が必要です)

フォームが 2 回送信されるので、2 つのアイテムを作成します。

同様の名前の質問がありますが、それらは検証の無効化または ajax の無効化に関連しています。Ajax、jquery の検証、およびサーバー側の検証 (MVC の Post-Redirect-Get) は、私にとっては問題なく機能しています。

明確にするために、私はjQuery Mobile の Ajax ナビゲーションを使用しているため、 ajax は作成していません。

4

2 に答える 2

1

これは私が今持っている解決策です：

$(document).on('submit', "form", null, function (e) {
    $(this).find("input:submit")
    .attr('disabled', 'disabled')
    // the following is optional, arguably unnecessary
    .delay(2000)
    .queue(function (next) { $(this).removeAttr('disabled'); next(); });
});

(Webkit で動作するように更新)

遅延は、何か問題が発生した場合に備えてのものです。実際には、フォームは置き換えられる必要があり、置き換えは無効になりません。

より良い提案を歓迎します。

于 2012-11-21T20:33:16.143 に答える
0 
$(document.body)
.on("input:submit", "click", function () {
  var $this = $(this);

  if ( !$this.is(".submitting") ) {
    $this.addClass("submitting");

    $.ajax({ url: "etc..."})
    .done(function () {
      // success callback;
    })
    .fail(function () {
      // error callback;
    })
    .always(function () {
      $this.removeClass("submitting");
    })
  }
});

submittingこれには、 CSS クラスを使用して送信ボタンのスタイルを変更できるという良い副作用があります。さらに/代わりに無効にして、alwaysコールバックで再度有効にすることもできます。

于 2012-11-21T20:31:49.930 に答える