等待ajax响应时显示加载gif

我有一张座位表。当我单击一个座位时，我想显示一个正在加载的gif。座位图来自svg文档。座位是svg元素。当ajax响应返回时，我想隐藏加载gif。我写了下面的代码，但它不起作用

<section>
    <div class="parent" style="text-align: center;">      
        <div class="panzoom" style="width: 500px; height:375px;">  
        <div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div>     
        </div>   
   </div>
   <div class="seperator"></div>
   <div class="buttons" style="text-align:center;">
        <input type="range" class="zoom-range">
        <a class="button reset">Sıfırla</a>
   </div>   
    <script>
            $(function () {
            var $section = $('section').first();
            $section.find(".panzoom").svg({
                loadURL: "https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg",onLoad:function(){ 
                    initAll();
                }
            });

            $section.find(".panzoom").panzoom({
                $zoomRange: $section.find(".zoom-range"),
                $reset: $section.find(".reset"),
                cursor: "auto",
                increment: 0.6
            });
        });

        function seatObject(id, label, status, token){
             this.id = id;
             this.label = label;
             this.status = status;
             this.token = token;
        }

        var seats = [];

        function initAll(){            
            $(".seatObj").each(function(){
                var id = $(this).attr("id");
                var temp = new seatObject("#" + id, "label" + id, "available", "");
                seats[id] = temp;                       
                $(this).click(function () {                                                                  
                var currentSeat = $(this).attr("id");
                $("#loading").show();                                 
                    if (seats[currentSeat].status == "selected")
                    {
                        dequeueSeat(currentSeat);
                    }
                    else
                    {
                        enqueueSeat(currentSeat);                                                
                        //alert($(this).attr("inkscape:label"));                     
                    }
                });
            }); 

            $.ajax({                    
                type: "GET",
                url : "@Url.Action("GetFullSeats","Event")",
                data:{layoutID:'@Model.LayoutID'},
                dataType : "json", 
                success:function(result)
                {              
                    var uintArray = Base64Binary.decode(result);
                    for (var i = uintArray.length - 1; i >= 0; i--) 
                    {
                        if (uintArray[i] > 0) 
                        {
                            for (var j = 0; j < 8; j++) 
                            {
                                if ((uintArray[i] & Math.pow(2, j)) == Math.pow(2, j)) 
                                {
                                    seats[(((2047 - i) * 8) + j)].status = "sold";
                                }
                            }
                        }
                    }        
                    drawSeats();
                }                     
            });    

            $.ajax({                    
                type: "GET",
                url : "@Url.Action("GetQueuedSeats", "Event")",
                data:{
                   layoutID:'@Model.LayoutID'
                },
                dataType : "json",                             
                success:function(result){              
                var queuedSeats = result.split(",");
                $("#loading").hide();
                    for (var i = 0; i < queuedSeats.length; i++) 
                    {
                        if (queuedSeats[i] != ""){                            
                            seats[queuedSeats[i]].status = "queued";
                        }
                    }
                    drawSeats();
                }    
            });            
        }

        function drawSeats(){
            for (var i = 0; i < seats.length; i++) 
            {
                 if (seats[i].status == "available")
                 {
                     $(seats[i].id).css('fill','#888888');
                 }
                 if (seats[i].status == "sold")
                 {
                     $(seats[i].id).css('fill','#ff4848');
                 }
                 if (seats[i].status == "queued")
                 {
                     $(seats[i].id).css('fill','#F0B702');
                 }
                  if (seats[i].status == "selected")
                 {
                     $(seats[i].id).css('fill','#00c865');
                 }
            }
        }

        function enqueueSeat(currentSeat){
            $.ajax({
                type: "GET",
                url: "@Url.Action("EnqueueSeat", "Event")",
                data:{
                    selectionGUID:"@(selectionGUID)",
                    seatID: currentSeat, 
                    layoutID:'@(Model.LayoutID)'
                },
                dataType:"json",                   
                success:function(data){                
                    if(data != "")
                    {
                        seats[currentSeat].status = "selected";
                        seats[currentSeat].token = data;                        
                    }
                    drawSeats();
                }                                      
            });   
        }

        function dequeueSeat(currentSeat){
            $.ajax({
                type: "GET",
                url: "@Url.Action("DequeueSeat", "Event")",
                data:{
                    reservationToken:seats[currentSeat].token
                },
                dataType:"json",                   
                success:function(data){
                    if(data)
                    {
                        seats[currentSeat].status = "available";
                        seats[currentSeat].token = "";
                    }
                    drawSeats();
                }                                      
            });   
         }
    </script>
</section>

Sıfırla
$（函数（）{
var$section=$（'section'）.first（）；
$section.find（“.panzoom”）.svg({
加载URL:“https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg，onLoad:function（）{
initAll（）；
}
});
$section.find（“.panzoom”）.panzoom({
$zoomRange:$section.find（“.zoom range”），
$reset:$section.find（“.reset”），
光标：“自动”，
增量：0.6
});
});
函数seatObject（id、标签、状态、令牌）{
this.id=id；
this.label=标签；
这个状态=状态；
this.token=token；
}
var席位=[]；
函数initAll（）{
$（“.seatObj”）。每个（函数（）{
var id=$（this.attr（“id”）；
var temp=新的seatObject（“#”+id，“标签”+id，“可用”和“）；
座位[id]=温度；
$（这个）。单击（函数（）{
var currentSeat=$（this.attr（“id”）；
$（“#加载”）.show（）；
如果（座位[currentSeat]。状态==“已选定”）
{
出列席位（currentSeat）；
}
其他的
{
排队座位（当前座位）；
//警报（$（this.attr（“inkscape:label”）；
}
});
}); 
$.ajax（{
键入：“获取”，
url:“@url.Action”（“GetFullSeats”，“事件”）”，
数据：{layoutID:'@Model.layoutID'}，
数据类型：“json”，
成功：功能（结果）
{              
var uintArray=Base64Binary.decode（结果）；
对于（变量i=uintArray.length-1；i>=0；i--）
{
如果（uintArray[i]>0）
{
对于（var j=0；j<8；j++）
{
if（（uintArray[i]&Math.pow（2，j））==Math.pow（2，j））
{
座位[（（2047-i）*8）+j].status=“售出”；
}
}
}
}        
抽座位（）；
}                     
});    
$.ajax（{
键入：“获取”，
url:“@url.Action（“GetQueuedSeats”，“事件”）”，
数据：{
layoutID:'@Model.layoutID'
},
数据类型：“json”，
成功：函数（结果）{
var queuedSeats=result.split（“，”）；
$（“#加载”）.hide（）；
对于（var i=0；i$.ajaxStart(function () {
    $('#loading').show();  // show loading indicator
});

$.ajaxStop(function() 
{
    $('#loading').hide();  // hide loading indicator
});

<script>
    // wait for the DOM to be loaded
    $(document).ready(function() 
    {
        // bind 'myForm' and provide a simple callback function
       $("#tempForm").ajaxForm({
       url:'../calling action or servlet',
       type:'post',
       beforeSend:function()
       {
         alert("perform action before making the ajax call like showing spinner image");
       },
       success:function(e){
        alert("data is"+e);
            alert("now do whatever you want with the data");
       }
       });
    });
</script>

<form id="tempForm" enctype="multipart/form-data">
<input type="file" name="" id="" />
</form>