jQuery ajaxComplete()方法用法解释和示例（代码+图解）

本文链接：https://blog.csdn.net/u014240783/article/details/115217192

ajaxComplete()方法用于指定当AJAX请求完成。

语法如下：

$(document).ajaxComplete(function(event, xhr, options))

参数：

event：它包含事件对象。
xhr：它包含XMLHttpRequest对象。
options：它包含AJAX请求中使用的选项。

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

示例1：本示例通过从服务器获取数据来更改<p>元素的内容。 AJAX请求完成后, 页面会显示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).ajaxComplete(function() {
                 alert(" AJAX request completes.");
             });
             $("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 >

输出如下：

在点击按钮之前

点击按钮后

示例2：本示例通过从服务器获取数据来更改<h1>元素的内容。 AJAX请求完成后, 页面会显示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).ajaxComplete(function() {
               alert("AJAX request completes.");
           });
           $("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 >

输出如下：

在点击按钮之前