如何在ajax函数进程中显示加载图像？

Question

以下是我的ajax函数,它将在按钮点击时填充html div.现在我想要的是如何在此函数启动时显示加载器图像,并且在此函数exucte之后加载器将隐藏.

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">

////////////////////////////////////////////////// ////////////////////////////上面是我问的ajx方法..但是如果我想在提交表格时做同样的事情那怎么能实现这个......？

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

{一些用于表单验证的javascript代码,如果所有验证都是真的那么flag将是真的.....

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

}

以下是我的一个div,它是img,我想隐藏在形式的底层上,当它完成时我想隐藏

"/>

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

Answer 1

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

看一下jquery Ajax doc,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                            
            }
        });
    }