jQuery Ajax（beforeSend和complete）在FireFox上正常工作，但在IE8和Chrome上没有

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相同），如果用户名已经注册，则在客户注册期间进行检查。当用户点击“检查可用性”按钮时，我正在显示一个忙碌的图像来代替检查按钮（实际上隐藏了检查按钮并显示图像），同时检查服务器上的可用性，然后显示消息。这是一个Sync调用（async：false），我使用beforeSend：并完成：显示和隐藏忙图像和检查按钮。这个东西在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" />&nbsp;

<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);

        }

    });

}

2 个解决方案

#1

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变得疯狂。我删除了它并调整了代码，现在一切正常。

#2

Point to Note: async=false is deprecated as of jQuery 1.5

要点注意：从jQuery 1.5开始，不推荐使用async = false

Should be using complete() callback instead.

应该使用complete（）回调代替。

#1