在获取 ajax 请求时显示加载程序 gif

Question

我们使用了一些代码，当用户键入时，它会通过 ajax 获取搜索结果。

我的问题是我不想要提交按钮，我们希望代码在获取内容时显示加载程序gif（ala FaceBook 样式点）。成功后隐藏加载器。

输入元素：

<input name="suburbs"  autocomplete="off" class="suburbsreviews" type="text" id="terms" size="50" onkeyup="getScriptPage('show_results','terms','1')" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''" <?if ($_GET['terms']){?>value="<?=$_GET['terms'];?>"<?}else{?>value="search"<?}?> />

我想我会添加一个加载跨度，我可以绝对使用以下方法将其定位在输入元素中：

<span class="loader">Loading...</span>

另外，我认为这段代码可以通过显示加载点来工作：

$.loader({
onAjax: true,
align: 'center',
img: 'images/facebook/pip.gif',
mask: true
});

它不工作。任何想法为什么？我用的是最新的jQuery。

Answer 1

我认为你把事情复杂化了，这是我使用的一个函数：

function setAreaTree(){
$('#projecthierarchy').html('<center><br><br><br><br><img src="img/loading_eeeeee.gif"></center>');
$.ajax({
    url: "sitemanager/sitemanager_ajax.php",
    data: {
        action:'getsidebar',
        pid:pid,
        aid:curaid,
        openareas:openareabars
    },
    success: function(data) { 
        $('#projecthierarchy').html(data)
    }
}); 

}

所以我只有一个 id="projecthierarchy" 的 div。当事件被触发时，加载器 gif 立即弹出，然后当 ajax 调用成功返回时，它会将 div 与内容一起放入。

这对你有用吗？