jQuery ajax 我弄了个小实验

学习中,所以自己瞎做实验...

function ajaxSend_global(event, xhr, settings) 
{
    $("#info").append("<div><b>i am ajaxSend_global @ global ...</b><div>");
    $("#info").append("<div id='time'>结果搜索中...</div>");
    $("#info").append("</br>");
}

就是这个结果搜索中... 是个静态提示..
怎么做成动态的?
我改成下面那个,就成了个死循环了,怎么让这个结果搜索中一直变?

function ajaxSend_global(event, xhr, settings) 
{
    $("#info").append("<div><b>i am ajaxSend_global @ global ...</b><div>");
    $("#info").append("<div id='time'></div>");
    $("#info").append("</br>");
    
    
    i=0;
    while (xhr.status!=200)
    {
        $("#time").text( '结果搜索中...' +i );
        i++;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="info"></div>

<script src="jquery-2.1.4.min.js"></script>
<script>
    ajaxSend_global('shehe',4000,'heeh');
    function ajaxSend_global(event, xhr, settings) {
        $ ("#info").append ("<div><b>i am ajaxSend_global @ global ...</b><div>");
        $ ("#info").append ("<div id='time'></div>");
        $ ("#info").append ("</br>");


        var i=0,intervalId;
        if(xhr.status!=200){
            intervalId = setInterval(function () {
                $("#time").text('结果搜索中...' + (++i));
            },1000);
        }else {
            clearInterval(intervalId);
        }
    }
</script>
</body>
</html>

你想要的是加载的过程中想显示类似等待中1［2，3，4，5...］，是么？
你用while是没有什么意义的，如果是每隔1s变动一次，while是无法控制时间的，基本上是瞬间完成。
建议：

var i = 0;
var timer = setInterval(function(){
    $("#time").text( '结果搜索中...' + (++i) );
}, 1000)

当成功时清除定时器即可

用setinterval吧，你看下这个链接了解下http://www.cnblogs.com/lmfeng/archive/2011/06/24/2089237.html

可以使用定时器。但是不要使用while。

你想要的效果，就是动态显示出ajax的状态吧。那可以看这个：

function getJson() {
    var sUrl,
        jData = {};

    jData['id'] = id;

    $('.textStatus').html('提交中');

    $.ajax({
        type: 'post',
        url: sUrl,
        data: jData,
        async: true,
        dataType: 'json',
        success: function (m) {
            $('.textStatus').html('提交成功');
        },
        error: function(xhr, status, error) {
            $('.textStatus').html('提交失败');
        }
    });
};

三个状态一一对应，其中error的部分，推荐可以稍微深入了解一下。

【热门文章】