javascript - ajax调用进度条/进度状态

Question

我正在使用 ajax 调用，我需要在我的文本框中显示一些进度状态。这是我的ajax调用。

<input type="text" name="cm" id="cm" />

<script type="text/javascript" language="javascript">
    $('#cm').blur(function(){
        $.ajax({
            type:'get',
            url: "/validatecm/"+cmnumber,
            cache:false,
            async:false,
            data:cmnumber,
            success: function(data) {
                alert (data)
            },
            error: function(data) {
                alert(data)
            }
        });
    });
</script>

在执行此 AJAX 调用时，我需要在我的文本框旁边显示一些进度状态。

Answer 1

你可以有这样的东西。AJAX 是异步的。我没有发现这个的用例是同步的。因此，删除async标志。

$('#cm').blur(function(){
    $(this).next("img").show();
    $.ajax({
        type:'get',
        url: "/validatecm/"+cmnumber,
        cache:false,
        // async:false,
        data:cmnumber,
        success: function(data) {
               alert (data);
               $(this).next("img").hide();
        }
        error: function(data) {
            alert(data) }
    }
}

上述脚本的一个小模拟将是：

$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("img").show();
        var a = $(this);
        setTimeout(function(){
            a.next("img").hide();
            a.val("AJAX Load Complete...");
        }, 1000);
    });
});

演示：jsFiddle。