jQuery 之 ajax 的状态函数（15）

ゞ浴缸里的玫瑰 2022-09-23 15:58 151阅读 0赞

jQuery ajaxComplete() 方法

ajaxComplete() 方法规定 AJAX 请求完成时运行的函数。

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

不像 ajaxSuccess()，通过 ajaxComplete() 方法规定的函数将在请求完成时运行，即使请求并未成功。

语法

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

===================================================

jQuery ajaxStart() 方法

ajaxStart() 方法规定 AJAX 请求开始时运行的函数。

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

语法

$(document).ajaxStart(function())

===================================================

当 AJAX 请求正在进行时显示 "loading" 的指示：

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $(document).ajaxStart(function(){
        $("#wait").css("display","block");
      });
      $(document).ajaxComplete(function(){
        $("#wait").css("display","none");
      });
      $("button").click(function(){
        $("#txt").load("demo_ajax_load.php");
      });
    });
    </script>
    </head>
    <body>
    <div id="txt"><h2>使用 AJAX 修改文本</h2></div>
    <button>修改内容</button>
    <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading..</div>
    </body>
    </html>

===================================================

jQuery ajaxStop() 方法

ajaxStop() 方法规定所有的 AJAX 请求完成时运行的函数。

当 AJAX 请求完成时，jQuery 会检查是否存在更多的 AJAX 请求。如果没有其他请求正在等待运行，ajaxStop()方法会运行指定的函数。

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

语法

$(document).ajaxStop(function())

function()

必需。规定所有的 AJAX 请求完成时运行的函数。

===================================================

当所有 AJAX 请求完成时，触发一个提示框：

$(document).ajaxStop(function()\{

alert("All AJAX requests completed");

\});

===================================================

jQuery ajaxError() 方法

ajaxError() 方法规定 AJAX 请求失败时运行的函数。

注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。

语法

$(document).ajaxError(function(event,xhr,options,exc))  
function(event,xhr,options,exc)

必需。规定当请求失败时运行的函数。

额外的参数：

event - 包含 event 对象

xhr - 包含 XMLHttpRequest 对象

options - 包含 AJAX 请求中使用的选项

exc - 包含 JavaScript exception

===================================================

$(document).ajaxError(function()\{

alert("An error occurred!");

\});

===================================================

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $(document).ajaxError(function(e,xhr,opt){
        alert("Error requesting " + opt.url + ": " + xhr.status + " " + xhr.statusText);
      });
      $("button").click(function(){
        $("div").load("wrongfile.txt");
      });
    });
    </script>
    </head>
    <body>
    <div><h2>Let AJAX change this text</h2></div>
    <button>Change Content</button>
    </body>
    </html>