jquery - 如何在 ajax 操作期间显示 throbber 或其他指示器？

Question

我想知道如何显示 ajax loader gif而“远程”功能则忙于处理后端程序。

如果可以的话，请您看一下milk example并告诉我它将如何融入该代码。只需单击“显示此页面上使用的脚本”即可查看源代码。

谢谢

Answer 1

假设您已经知道如何使用 AJAX。基本过程是，在操作开始时显示图像，最后当您从服务器返回结果时隐藏它。

<!--html-->
<img id='ajaxLoader' src='mahAjaxLoader.gif' />
<!--has display:none via CSS-->

-

//js
function doAjaxStuff() {
    $('#ajaxLoader').toggle(); //toggle visibility; it's now shown

    //other stuff

    $.ajax({
        //normal AJAX stuff
        onComplete : function() {
            $('#ajaxLoader').toggle(); //it's hidden again
            //other oncomplete stuff
    });
}

参见:

• http://api.jquery.com/toggle-event/
• http://api.jquery.com/jQuery.ajax/

编辑:remote方法像 ajax 请求一样接受对象文字。所以插入这个:

remote : {
    beforeSend : function() {
        $('#ajaxLoader').toggle();
    }
    onComplete : function() {
        $('#ajaxLoader').toggle();
    }
}