ajax加载超时提示怎样实现

最新推荐文章于 2022-11-30 19:13:17 发布

mjsws1

最新推荐文章于 2022-11-30 19:13:17 发布

阅读量100

点赞数

这次给大家带来ajax加载超时提示怎样实现，ajax加载超时提示实现的注意事项有哪些，下面就是实战案例，一起来看一下。

index.php

 
      <!doctype html> 
     
      <html> 
     
      <head> 
     
      <meta charset= 
      "utf-8" 
      /> 
     
      <title>加载超时</title> 
     
      <script type= 
      "text/javascript"  
      src= 
      "http://www.267774.com/js/jquery/1.7/jquery.min.js" 
      ></script> 
     
      </head> 
     
      <body> 
     
      <script type= 
      "text/javascript" 
      > 
     
      function  
      load(){ 
     
      $( 
      "#tips" 
      ).html( 
      "加载中..." 
      ); 
     
      $.ajax({ 
     
      async:true, 
     
      cache:false, 
     
      timeout:8000, 
     
      type: 
      "POST" 
      , 
     
      url: 
      "result.php" 
      , 
     
      data:{a: 
      '123' 
      }, 
     
      error: 
      function 
      (jqXHR, textStatus, errorThrown){ 
     
      if 
      (textStatus== 
      "timeout" 
      ){ 
     
      $( 
      "#tips" 
      ).html( 
      "加载超时，请重试" 
      ); 
     
      } 
      else 
      { 
     
      alert(textStatus); 
     
      } 
     
      }, 
     
      success: 
      function 
      (msg){ 
     
      $( 
      "#tips" 
      ).html(msg); 
     
      } 
     
      }); 
     
      } 
     
      </script> 
     
      <input type= 
      "button"  
      id= 
      "load"  
      onclick= 
      "load();"  
      value= 
      "点击加载" 
      /> 
     
      <p id= 
      "tips" 
      ></p> 
     
      </body> 
     
      <html>

result.php

1

2

3

4

 
      <?php 
     
      //sleep(20); 
     
      sleep(2); 
     
      echo  
      $_POST 
      [ 
      'a' 
      ]. 
      'test服务器返回结果' 
      ;