jquery - 如何在 ajax 函数处理过程中显示加载图像？

Question

以下是我的 ajax 函数，它将在按钮单击时填充 html div。现在我想要的是如何在此函数启动时显示加载器图像，并且在此函数执行后加载器将隐藏。

function campaignList(){
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            success:function(data){
                $(".main_content").html(data);                              
            }
        });
    }

我曾尝试使用以下脚本

<script type="text/javascript">
$("#loading_layer").ajaxStart(function(){
       $(this).show();
     });
</script>

但没有任何反应.. 以下是我的 div，其中有 ajax 加载程序 gif 图像，我想隐藏和显示

<div id="loading_layer" style="display: none">

///////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////那我怎么能做到这一点..？

以下是我提交表单的一个 javascript 的代码行

{一些用于表单验证的 javascript 代码，如果所有验证都为真，那么标志将为真.....

   if (flag == true) {
    div.style.display = '';
 alert("");
    document.editadform.submit();
    }
         div.style.display = 'none';
        return flag;

}

以下是我的一个 div，我想在提交表单时显示隐藏，完成后我想隐藏

" />

所以任何人都可以指导我解决这个问题吗？

Answer 1

您可以通过添加beforeSendAJAX 脚本来完成，

看看 jquery Ajax 文档，http://api.jquery.com/jQuery.ajax/

function campaignList(){
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            beforeSend: function ( xhr ) {
               //Add your image loader here
            },
            success:function(data){
                $(".main_content").html(data);                              
            }
        });       

 }

Answer 2

这应该可以正常工作：

function campaignList(){
        $(".main_content").html("<img src='loader.png'>"); // show the ajax loader
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            success:function(data){
                $(".main_content").html(data);  // this will hide the loader and replace it with the data                            
            }
        });
    }