Method for jquery to Realize ajax Loading Timeout Prompt

  • 2021-07-04 18:21:45
  • OfStack

In this paper, an example is given to describe the method of jquery to realize ajax loading timeout prompt. Share it for your reference, as follows:

index.php


<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title> Load timeout </title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      function load(){
        $("#tips").html(" Loading ...");
        $.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(" Load timed out, please try again ");
            }else{
              alert(textStatus);
            }
          },
          success:function(msg){
            $("#tips").html(msg);
          }
        });
      }
    </script>
    <input type="button" id="load" onclick="load();" value=" Click to load "/>
    <div id="tips"></div>
  </body>
<html>

result.php


<?php
//sleep(20);
sleep(2);
echo $_POST['a'].'test The server returns results ';

For more readers interested in jQuery related content, please check the topics of this site: "Summary of Ajax Usage in jquery", "Summary of jQuery form Operation Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Operation json Data Skills", "Summary of jQuery Extension Skills", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.


Related articles: