Question

在这段代码中，我设置了超时4000但是在4秒之后没有返回值，但是如果我在这个脚本上省略了这个加载部分，则返回值。我想在4秒内加载.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

你使用了错误的语法，对于setTimeout，第一个参数应该是函数名称或闭包

setTimeout(function(){ 
    alert("Hello"); 
}, 4000);

或

function helloWorld(){
    alert("Hello");
};
setTimeout('helloWorld', 4000);

Answer 2

$(document).ready(function(){
    $('#search').click(function(){
        var enroll= $('#employee_list').val();
        if(enroll != '')
        {
            $("#employee_details .message").html('<img src="btn-ajax-loader.gif" /> &nbsp; Searching ...');
            $("#employee_details .message").css("display", "block");
            $("#employee_details .table").css("display", "none");
            $.ajax({
                url:"fetch.php",
                method:"POST",
                data:{enroll:enroll},
                dataType:"JSON",
                success:function(data)
                {
                    if(data.length){
            $("#employee_details .message").css("display", "none");
            $("#employee_details .table").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)  { 
            $("#employee_details .message").css("display", "none");
            $("#employee_details .table").css("display", "none");
                        alert("No Such Record Found");
                    }
               }

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

    });
});

<!DOCTYPE html>
<html>
 <head>
  <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">
   <div class="message" style="display:none"></div>
   <table class="table table-bordered" style="display:none">
    <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>

如何在脚本中设置时间

2 个答案: