jQuery送信中にAjaxローダーを表示し、複数の送信を防止する

Question

私は、jQuery AJAXを使用してすべてのデータをサーバーに送信するいくつかの異なるタイプのフォーム要素を持つアプリケーションを持っています。

私は何をしたいです：

1. は

これは簡単ですAJAX伝送

防止+ 二回提出から利用者（多くのクリック）の間にローダーを表示しますサイト上のすべてのタイプのフォーム（コメント、ファイルのアップロードなど）を一括して行います。しかし、それがこれを扱うもっとグローバルな方法であるかどうかを知りたいのですが、私は興味がありますか？

言うには十分にスマート何か：

1. フォームをサーバーに送信し、応答を待っている場合、無視すべてが
2. を提出するには、クリック/提出項目
3. にDISABLEDクラスを表示します投稿項目に最も近いclass="spinner"の読み込みクラスを表示

あなたはどう思いますか？良いアイデア？前に完了？

Answer 1

jQuery Global Ajax Event Handlersをご覧ください。一言で言えば

、あなたは一人ひとり AJAX要求で発生したイベント、その名のグローバルイベントハンドラを設定することができます。いくつかのイベントがありますが、下のコードサンプルではajaxStart()とajaxComplete()を使用します。

アイデアは、我々はロードを示すことが、ajaxStart()イベントにフォーム&ボタンを無効にされ、その後、フォームを再度有効にしてajaxComplete()イベント内部の負荷要素を非表示にします。

var $form = $("form"); 
$form.ajaxStart(function() { 

    // show loading 
    $("#loading", this).show(); 

    // Add class of disabled to form element 
    $(this).addClass("disabled"); 

    // Disable button 
    $("input[type=submit]", this).attr("disabled", true); 
}); 

とAjaxの完全なイベント

$form.ajaxComplete(function() { 

    // hide loading 
    $("#loading", this).hide(); 

    // Remove disabled class 
    $(this).removeClass("disabled"); 

    // Re-enable button 
    $("input[type=submit]", this).removeAttr("disabled"); 
}); 

あなたは要素の一部をクリーンアップする必要がある場合がありますので、AJAX呼び出しが失敗した場合にもajaxErrorイベントにアタッチする必要があるかもしれません。それをテストし、失敗したAJAXリクエストで何が起こるかを確認してください。

P.S.$.ajaxなど（$.getJSON）に電話している場合は、AJAXがいずれの要素にも接続されていないため、$.ajaxStartと$.ajaxCompleteでこれらのイベントを設定できます。 $(this)にアクセスできないので、コードを少し並べ替える必要があります。

Answer 2

私はあなたがアプリの使い勝手を向上させるためには2つ、3つは行う必要があると信じています。バックエンドを愚かにしない方が良いですが、セキュリティ上の問題がある場合は、それも処理する必要があります。