php - jQuery AJAX 进行中

Question

因此，我在网站的主页上设置了密码恢复选项，该选项使用 swift mailer 向用户发送新密码。用户将他/她的电子邮件输入到一个框中，主页向 php 脚本发送一个 AJAX 请求。所有这些都有效，但是当您点击发送时，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 操作都会显示它。