Question

以下所有代码均正确无误。在运行代码时。输出以正确的方式显示但成功运行后。输出显示在那个时候仍然.gif加载图像连续加载。如何在输出后停止？请帮助解决这个问题。我的代码如下。 index.php

<!DOCTYPE html>
<html>
 <head>
  <title>How to return JSON Data from PHP Script using Ajax Jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  #result {
   position: absolute;
   width: 100%;
   max-width:870px;
   cursor: pointer;
   overflow-y: auto;
   max-height: 400px;
   box-sizing: border-box;
   z-index: 1001;
  }
  .link-class:hover{
   background-color:#f1f1f1;
  }
  </style>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">How to return JSON Data from PHP Script using Ajax Jquery</h2>
   <h3 align="center">Search Employee Data</h3><br />   
   <div class="row">
    <div class="col-md-4">
     <input type="text" name="employee_list" id="employee_list" class="form-control" Placeholder="Enter Your Enrollment Number...">
     <div id="show"></div> 
    </div>
    <div class="col-md-4">
     <button type="button" name="search" id="search" class="btn btn-info">Search</button>
    </div>
   </div>
   <br />
   <div class="table-responsive" id="employee_details" style="display:none">
   <table class="table table-bordered">
    <tr>
     <td width="10%" align="right"><b>Name</b></td>
     <td width="90%"><span id="name"></span></td>
    </tr>
    <tr>
     <td width="10%" align="right"><b>Address</b></td>
     <td width="90%"><span id="address"></span></td>
    </tr>

    <tr>
     <td width="10%" align="right"><b>Gender</b></td>
     <td width="90%"><span id="total_marks"></span></td>
    </tr>
    <tr>
     <td width="10%" align="right"><b>Designation</b></td>
     <td width="90%"><span id="email"></span></td>
    </tr>
    <tr>
     <td width="10%" align="right"><b>Age</b></td>
     <td width="90%"><span id="ph"></span></td>
    </tr>
   </table>
   </div>

  </div>
 </body>
</html>

<script>
$(document).ready(function(){
    $('#search').click(function(){
        var enroll= $('#employee_list').val();
        if(enroll != '')
        {
            $("#show").html('<img src="btn-ajax-loader.gif" /> &nbsp; Searching ...');

            //$('#employee_details').css("display", "none");
            $.ajax({
                url:"fetch.php",
                method:"POST",
                data:{enroll:enroll},
                dataType:"JSON",
                success:function(data)
                {
                   // console.log(data);
                    setTimeout(function(){ 
                        if(data.length !=0){    
                            $('#employee_details').css("display","block");
                            $('#name').text(data.name);
                            $('#address').text(data.address);
                            $('#total_marks').text(data.total_marks);
                            $('#ph').text(data.ph);
                            $('#email').text(data.email);
                        }

                        if(data.length==0)  { 
                            alert("No Such Record Found");
                            $('#employee_details').css("display", "none");
                        }
                    }, 1000);

                }

            })
        }
        else
        {
            alert("Please Enter Enrollment Number");
            $('#employee_details').css("display", "none");
        } 

    });
});
</script>

Answer 1

你需要在完成AJAX时清空你的div#show：

      $.ajax({
            url:"fetch.php",
            method:"POST",
            data:{enroll:enroll},
            dataType:"JSON",
            success:function(data)
            {
               // console.log(data);
                setTimeout(function(){ 
                    if(data.length !=0){    
                        $('#employee_details').css("display","block");
                        $('#name').text(data.name);
                        $('#address').text(data.address);
                        $('#total_marks').text(data.total_marks);
                        $('#ph').text(data.ph);
                        $('#email').text(data.email);
                    }

                    if(data.length==0)  { 
                        alert("No Such Record Found");
                        $('#employee_details').css("display", "none");
                    }

                    $('#show').empty(); // <<< HERE
                }, 1000);

            }

        })

输出后加载.gif文件

1 个答案: