JQuery ajaxSuccess()用法及代码示例

jQuery中的ajaxSuccess()方法用于指定AJAX请求成功完成时要运行的函数。

用法:

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

参数：：此方法接受强制性的单参数函数。此函数接受上述和以下所述的三个参数：

event:它保存事件对象。
xhr:它包含XMLHttpRequest对象。
options:它在AJAX请求中保留使用的选项。

demo.txt文件存储在服务器上，单击更改内容按钮后将加载。
demo.txt

This is GFG.

示例1:本示例通过从服务器获取数据来更改元素的内容。当AJAX请求成功完成时，页面会显示AJAX请求成功完成。

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

输出：

在单击按钮之前：
单击按钮后：

示例2:本示例通过从服务器获取数据来更改元素的内容。当AJAX请求成功完成时，页面会显示AJAX请求成功完成。

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

输出：

在点击按钮之前
点击按钮后

相关用法

注：本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 jQuery | ajaxSuccess() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。