想要在 jquery 中调用 ajax 函数之前在模态窗口上加载微调器

Question

我只想在单击发送电子邮件按钮时加载微调器，我正在使用 ajax 功能发送电子邮件。发送电子邮件后，我想隐藏微调器。这是我的代码：

我的微调器正在加载 div

<div id="loader" class="loader" style="display:none;"></div>

微调器类

<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://test:8000/images/page_loader.gif') 50% 50%   no-repeat rgb(249,249,249);    
}
</style>

我的 jquery：

$("#send_mail").click(function(){
    $(".loader").show();
    var subject = $("#subject").val(); 
    var token = "{!! csrf_token() !!}";
    var order_id = "{{ @$orders->id }}";
    var url = "{!! URL::to('/') !!}";
    $.ajax({
        type: 'POST',
        url: url +'/order/'+order_id+'/sendmail',
        data: {'_token':token, 'subject':subject },
        async : false,
        beforeSend: function() { 

        }, 
        success : function(data) {
            setTimeout(function()
            {
                $(".loader").fadeOut("slow");
            },9000);
            var result = JSON.parse(data);
            if(result)
            {
                $("#email_modal").modal('hide');
                if(result['status'] == 'success')
                {
                    $("#mail_success").show();
                    setTimeout(function()
                    {
                        $('#mail_success').hide();
                    },3000);
                }
                else
                {
                    $("#mail_error").show();
                    setTimeout(function()
                    {
                        $('#mail_error').hide();
                    },3000);
                }
            }
        },
        error: function(data){
            alert(data);
        }
    });
}); 

问题是，我的微调器在邮件发送后开始加载。谁能帮我解决这个问题，比如我在这里犯了什么错误？？？

感谢您的帮助！！！

提前致谢。

Answer 1

您需要在beforeSend 回调中显示加载器并在error 或success 回调中隐藏。

JS 代码：

 //hide the spinner by default in css 'display:none'
 $.ajax({
   data:...
   url:....
   beforeSend:function () {
        $('.loader').show();
   },
   success:function(){
        $('.loader').hide();
        .....
   },
   error:function(){
       $('.loader').hide();
       .....
   });