jQuery如何使用ajaxStop()方法?用法示例

2021年4月2日10:58:54 发表评论 61 次浏览

ajaxStop()方法用于指定在AJAX请求完成时运行的函数。

语法如下:

$(document).ajaxStop(function())

参数:仅需一个参数。

  • function():它指定了Ajax请求完成后要运行的功能。

demo.txt文件存储在服务器上, 单击更改内容按钮后将加载。 demo.txt的内容是:这是GFG。

示例1:本示例通过从服务器获取数据来更改<p>元素的内容。请求完成后, 页面会显示AJAX请求已停止.

<!DOCTYPE html>
<html>
  
<head>
     <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
     </script>
     <script>
         $(document).ready(function() {
             $(document).ajaxStop(function() {
                 alert(
                   "AJAX request stopped");
             });
             $("button").click(function() {
                 $("#paragraph").load(
                   "demo.txt");
             });
         });
     </script>
     <style>
         body {
             text-align: center;
         }
     </style>
</head>
  
<body>
     <div id = "div_content">
         <h1 style = "color: green;">
           lsbin
       </h1>
         <p id = "paragraph"
            style = "font-size: 20px;">
           A computer science portal for geeks
         </p>
     </div>
     <button>Change Content</button>
</body>
  
</html>

输出如下:

在单击按钮之前:

jQuery如何使用ajaxStop()方法?用法示例1

单击按钮后:

jQuery如何使用ajaxStop()方法?用法示例2
jQuery如何使用ajaxStop()方法?用法示例3

示例2:本示例通过从服务器获取数据来更改<h1>元素的内容。请求完成后, 页面会显示AJAX请求已停止.

<!DOCTYPE html>
<html>
  
<head>
     <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
     </script>
     <script>
         $(document).ready(function() {
             $(document).ajaxStop(function() {
                 alert(
                   "AJAX request stopped");
             });
             $("button").click(function() {
                 $("#paragraph").load(
                   "demo.txt");
             });
         });
     </script>
     <style>
         body {
             text-align: center;
         }
     </style>
</head>
  
<body>
     <div id = "div_content">
         <h1 style = "color: green;">
           lsbin
       </h1>
         <p id = "paragraph" 
            style = "font-size: 20px;">
       A computer science portal for geeks
         </p>
     </div>
     <button>Change Content</button>
</body>
  
</html>

输出如下:

在单击按钮之前:

jQuery如何使用ajaxStop()方法?用法示例4

单击按钮后:

jQuery如何使用ajaxStop()方法?用法示例5
jQuery如何使用ajaxStop()方法?用法示例6

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: