在等待Ajax响应时显示加载动画

Question

我有一个座位图。当我点击座位时，我想显示一个加载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>

- ebruszl

Answer 1

你可以将两个函数分别绑定到 ajaxStart() 和 ajaxStop() 上。 .ajaxStart()

注册一个处理程序，在第一个 Ajax 请求开始时调用。 这是一个 Ajax 事件。

.ajaxStop()

注册一个处理程序，在所有 Ajax 请求完成时调用。 这是一个 Ajax 事件。

$.ajaxStart(function () {
    $('#loading').show();  // show loading indicator
});

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

这些函数会在Ajax请求开始或结束时自动调用。

- Gung Foo

---

只是一个快速提醒，需要提醒大家可能需要在成功和错误调用结束时隐藏加载指示器，因为ajaxStop在您完成成功/错误操作之前被调用。 - rory

Answer 2

试用这个插件

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

你可以在这里找到插件。

- Hussain Akhtar Wahid 'Ghouri'