php - jQuery AJAX 進行中

Question

そのため、Web サイトのメイン ページにパスワード回復オプションを設定し、Swift Mailer を使用してユーザーに新しいパスワードをメールで送信します。ユーザーが自分の電子メールをボックスに入力すると、メイン ページが AJAX 要求を php スクリプトに送信します。それはすべて機能しますが、送信を押すと、phpスクリプトが応答を返すまでに時間がかかりますNew password successfully sent to email. ユーザーが最初のクリックが失敗したと思って何度も送信をクリックしたくありません。ajaxがスクリプトの応答を待っている間に、ある種の読み込みバーを表示するとともに送信ボタンを無効にする方法はありますか? ありがとう

Answer 1

クリックしたらボタンを無効にし、ajax が完了したら再度有効にすることができます。

したがって、ajax を呼び出す前に、次のようにします。

 $("#MyBtn").attr("disabled", "disabled");

次に、AJAX が終了したら、属性を削除します

$("#MyBtn").removeAttr("disabled");      

非表示の div を表示/非表示にすることもできます。

IE

<div id="divWait" style="display:none;">Please Wait...</div>

上記のコードは次のようになります

したがって、ajax呼び出しの前に：

 $("#MyBtn").attr("disabled", "disabled");
 $("divWait").show();

AJAX が終了すると...

$("#MyBtn").removeAttr("disabled");   
$("#divWait").hide();

さらに、AJAX 呼び出しの結果に応じて、div 内のテキストも変更できます。

だから..それが機能する場合は、divを非表示にせず、テキストを変更するだけです:

$("#divWait").html("Your password was sent..");

失敗した場合は、上記のように div を非表示にするか、メッセージを変更します

 $("#divWait").html("oops, there was a booboo");

Answer 2

手動で行う代わりに、JQuery の ajaxStart および ajaxStop 関数を使用してください。

$('#progress').ajaxStart(function () {
 //disable the button
 $(this).show();
}).ajaxStop(function () {
 //enable the button
 $(this).hide();
});

注: ページ上のすべての JQuery AJAX 操作に対して表示されます。