jQuery AJAX InProgress

Question

所以我在我的网站主页上设置了密码恢复选项，使用swift邮件程序通过新密码向用户发送电子邮件。用户将他/她的电子邮件输入到框中，主页面向php脚本发送AJAX请求。所有这些都有效但是当你点击发送时，需要一段时间才会发送回复说明New password successfully sent to email的PHP脚本。我不希望用户再次点击发送，并再次认为第一次点击没有通过。有没有办法在ajax等待脚本的响应时禁用发送按钮以及显示某种加载条？感谢

Answer 1

您可以在单击按钮后禁用该按钮，然后在ajax完成时重新启用它。

所以在调用ajax之前要执行以下操作：

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

然后一旦AJAX完成，删除属性

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

你也可以有一个隐藏的div然后显示/隐藏它..

即

<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操作上。