如何在 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>

但是什么都没有发生.. 以下是我想要隐藏和显示的 ajax 加载程序 gif 图像的 div

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

/////////////////////////////////////// /////////////////////////// 以上是我问的 ajx 方法..但是如果我想在提交表单时做同样的事情，那么我该如何实现这个..？

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

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

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

}

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

" />

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

Answer 1

您可以在 AJAX 脚本中添加 beforeSend，

查看 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                            
            }
        });
    }