jQuery Ajax（beforeSend 和 complete）在 FireFox 上正常工作，但在 IE8 和 Chrome 上不能正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2227397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Ajax (beforeSend and complete) working properly on FireFox but not on IE8 and Chrome
提问by Farhan Zia
I am using jQuery ajax version 1.4.1 in my MVC application (though the issue I am discussing was same with the old jQuery version 3.2.1) as well, to check during customer registration if the username is already registered. As the user clicks on the "Check Availibility" button, I am showing a busy image in place of the check button (actually hiding the check button and showing the image) while checking the availibility on the server and then displaying a message. It is a Sync call (async: false) and I used beforeSend: and complete: to show and hide the busy image and the check button. This thing is working well on Firefox but in IE 8 and Chrome, neither the busy image appear nor the check button hides rather the check button remained pressed as the whole thing has hanged. The available and not available messages appear correctly though. Below is the code:
我也在我的 MVC 应用程序中使用 jQuery ajax 版本 1.4.1（尽管我正在讨论的问题与旧的 jQuery 版本 3.2.1 相同），以在客户注册期间检查用户名是否已注册。当用户单击“检查可用性”按钮时，我会在检查服务器上的可用性然后显示消息的同时显示一个忙碌的图像来代替检查按钮（实际上隐藏了检查按钮并显示了图像）。这是一个同步调用 (async: false)，我使用 beforeSend: 和 complete: 来显示和隐藏忙碌图像和检查按钮。这东西在 Firefox 上运行良好，但在 IE 8 和 Chrome 中，既没有出现繁忙的图像，也没有隐藏检查按钮，而是检查按钮保持按下状态，因为整个事情都挂了。但是，可用和不可用消息正确显示。
HTML in a User Control (ascx):
用户控件中的 HTML (ascx)：
<div id="available">This Username is Available</div>
div id="not_available">This Username is not available</div>
<input id="txtUsername" name="txtUsername" type="text" size="50" />
<button id="check" name="check" type="button">Check Availability</button>
<img id="busy" src="/Content/Images/busy.gif" />
On the top of this user control, I am linking an external javascript file that has the following code:
在此用户控件的顶部，我正在链接一个具有以下代码的外部 javascript 文件：
$(document).ready(function() {
$('img#busy').hide();
$('div#available').hide();
$('div#not_available').hide();
$("button#check").click(function() {
var available = checkUsername($("input#txtUsername").val());
if (available == "1") {
$("div#available").show();
$("div#not_available").hide();
}
else {
$("div#available").hide();
$("div#not_available").show();
}
});
});
function checkUsername(username) {
$.ajax({
type: "POST",
url: "/SomeController/SomeAction",
data: { "id": username },
timeout: 3000,
async: false,
beforeSend: function() {
$("button#check").hide();
$("img#busy").show();
},
complete: function() {
$("button#check").show();
$("img#busy").hide();
},
cache: false,
success: function(result) {
return result;
},
error: function(error) {
$("img#busy").hide();
$("button#check").show();
alert("Some problems have occured. Please try again later: " + error);
}
});
}
回答by Farhan Zia
I found the answer to my question. It was actually the sync call (async = false) which was making IE mad. I removed that and adjusted the code and everything is working fine now.
我找到了我的问题的答案。实际上是同步调用 (async = false) 使 IE 发疯了。我删除了它并调整了代码，现在一切正常。
回答by Eshmeister
Point to Note: async=false is deprecated as of jQuery 1.5
注意事项：async=false 从 jQuery 1.5 开始被弃用
Should be using complete() callback instead.
应该使用 complete() 回调代替。
