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 loader gif图像在那里我想要隐藏和显示

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

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

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

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

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

}

以下是我的一个div，我希望隐藏在形式的下属上，以及当它完成时我想隐藏

“/＆gt;

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

Answer 1

您可以在AJAX脚本中添加beforeSend

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

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

2 个答案: