单击按钮调用jquery ajax时，加载图像在长时间延迟后显示答案

【问题标题】：Loading image shows after a long delay when clicking a button to call jquery ajax单击按钮调用jquery ajax时，加载图像在长时间延迟后显示
【发布时间】：2013-02-24 08:08:23
【问题描述】：

我试图在单击按钮时显示加载图像，该按钮将通过 ajax 验证表单，但加载图像仅在延迟后显示（上传到服务器时显示图像需要 2 秒以上）。但我希望它在按钮单击事件的那一刻。我的代码如下。

$("#Save").click(function() {
    // shows theloading image (here I am expecting the loading image, it never shows.)
    $("#load_img").show();  
    // calls ajax for vaidation
    lookUpValidation($("#item1")) 
    // calls ajax for vaidation
    lookUpValidation($("#item2"))
})
function lookUpValidation(this_element,id) {
    url = "/validate/lookupid/"+id,
    lookUpValidationResult  = false;
    lookUpValidationData    = false;    
    if(this_element.val()!="") {
        $.ajax({
            url : url,
            type : "POST",
            async : false,
            data : {    
                "value"   : this_element.val()
            },      
            beforeSend : function(data) {
                // shows theloading image
                $("#load_img").show();
            },
            complete : function(data) {             
                if(data) {
                    var res = JSON.parse(data.responseText);
                    lookUpValidationData = res;
                        if(res.field) {    
                            lookUpValidationResult = 1;
                        }
                        else
                            // not found
                            lookUpValidationResult = 2;

                    }
                    else {
                        // not found
                        lookUpValidationResult = 2;
                    }       
                }
            });
        }
        else {
            // null
            lookUpValidationResult = 3;
        }
        return lookUpValidationResult;
}

HTML

<div class="k-loading-image" id="load_img" style="display:none;">
    <div class="k-loading-color">
    </div>
</div>

【问题讨论】：

从您的代码看来应该立即显示
是的，我不知道为什么它没有显示在那里......
html 是
图片大吗？尝试使用警报$("#Save").click(function() { alert('test'); $("#load_img").show(); })。

标签： html jquery

【解决方案1】：

在您的页面中加载该图像，例如：

body {
   background: #fff url(path/to/load_image.gif?) no-repeat -1000px -1000px;
}

顺便说一句，您可以验证所有项目，处理它们并返回一个 ok 响应（使用 json 标头来避免 parseJSON），只需一次调用即可重定向。

【讨论】：

【解决方案2】：

对服务器的调用是同步完成的，因此点击处理程序会阻止浏览器显示图像。

据我所知，没有跨浏览器的方式可以强制从 javascript 更新用户界面。但是您可能会为此实施自定义解决方案。谷歌搜索应该对此有所帮助。

另一种处理方法是阻止默认处理单击事件，并在所有异步验证成功后提交表单。

恕我直言，更好的解决方案是在用户填写表单时异步验证每个字段，并且仅在完成所有验证后才启用保存按钮。这可以使用.blur() 来完成，以便在用户移动到下一个输入时验证每个输入。用户键入时的验证可以通过.keypress() 和setTimeout() 的组合来实现。下面是一个简短的例子来说明这一点：

<!doctype html>
<html lang="en">
<head></head>
<body>
    <form id="form" action="form.html">
        <label for="item1">Validate email on blur:</label><input id="item1" type="text"/><span id="item1-status">Invalid</span><br/>
        <lavel for="item2">Validate email while writing</lavel><input id="item2" type="text"/><span id="item2-status">Invalid</span><br/>
        <button id="Save" type="submit">Save</button>
    </form>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function () {
        var validState = {
            "set": function (name, state) {
                this[name] = state;
                updateUI();
            },
            "item1": null,
            "item2": null
        }

        function formIsValid() {
            var res = true;
            for(var name in validState) {
                res = res && validState[name];
            }

            return res;
        }

        function validString(val) {
            return val==null ? ""
                : val ? "Valid" : "Invalid"
        }

        function updateUI() {
            $("#item1-status").text( validString(validState.item1) );
            $("#item2-status").text( validString(validState.item2) );
            $("#Save").prop("disabled", !formIsValid());
        }

        function isEmail(str) {
            return /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(str);
        }

        function validateItem1() {
            validState.set("item1", isEmail($("#item1").val()));
        }
        function validateItem2() {
            validState.set("item2", isEmail($("#item2").val()));
        }

        // Validate after loosing focus
        $("#item1").blur(validateItem1);

        // Use timeout to validate when user has stopped typing
        $("#item2").blur(function() {
            var handle = $(this).data("validation-timer");
            if( handle ) clearTimeout(handle);
            validateItem2();
        }).keydown(function () {
            var self = $(this);
            var handle = self.data("validation-timer");
            if( handle ) clearTimeout(handle);
            var new_handle = setTimeout(validateItem2, 1000);
            self.data("validation-timer", new_handle);
        });

        updateUI();
    });
    </script>
</body>
</html>

【讨论】：

验证如何工作？在点击处理程序之后还会发生其他事情吗？
是的，具体取决于验证结果，我正在设置一个错误消息数组来显示错误。如果我提交了异步表单而不显示错误消息。
如果您在点击处理程序中放置return false，您可以在通过验证时使用$('#theForm').submit()。这样你就可以使用异步验证了
感谢您的回复，我会试试这个并更新您的结果。再次感谢