ajax调用进度条/进度状态

时间:2013-03-07 15:10:42

标签: javascript jquery html ajax

我正在使用ajax调用,我需要在文本框中显示一些progres状态。这是我的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调用时在我的文本框中显示一些进度状态。

1 个答案:

答案 0 :(得分:2)

你可以拥有这样的东西。 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