• jquery API Ajax(1)


    分类:Ajax


    .ajaxComplete()

    1.当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent。

    HTML示例代码

     1 <!doctype html>
     2     <html>
     3      <head>
     4           <meta charset="utf-8">
     5           <title>jquery学习</title>
     6           <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
     7           <script src="js/custom.js"></script>
     8           <link type="text/css" rel="stylesheet" href="css/style.css"/>
     9      </head>
    10      <body>
    11      <div class="wrap">
    12           <h1>hello ajax</h1>
    13           <h2>.ajaxComplete()</h2>
    14           <p>每当一个ajax请求完成时会触发ajaxComplete事件,在这个时间点所有处理函数会使用.ajaxComplete()方法注册并执行。</p>
    15           <button type="button" class="trigger-binding">trigger-binding</button>
    16           <button type="button" class="trigger-nobinding">trigger-nobinding</button>
    17           <div class="result"></div>
    18           <div class="result2"></div>
    19           <div class="log"></div>
    20           <div class="msg"></div>
    21           <h2>.ajaxError()</h2>
    22 
    23          
    24           <button type="button" class="ajaxError">ajaxError</button>
    25           <div class="lesson2-result">
    26           </div>
    27           <div class="lesson2-msg"></div>
    28      </div>
    29      </body>
    30     </html>
    View Code

    js代码

     1 $(document).ready(function(){
     2     //alert("hello jquery!");
     3   $(".trigger-binding").click(function(){
     4      $(".result").load("text.html");
     5   });
     6    $(".trigger-nobinding").click(function(){
     7      $(".result2").load("text2.html");
     8   });
     9   //1.ajax执行之后会执行ajaxComplete()函数
    10   /*********注意从jquery1.8之后ajaxComplete只能绑定document*****/
    11    $(document).ajaxComplete(function(){
    12           $(".log").text("Ajax执行了!");
    13      
    14   });
    15   //2.区分不同的请求
    16   //使参数传递给这个处理函数通过事件对象XMLHttpRequest对象和设置对象中的请求,来做每一次ajaxComplete处理执行的
    17   //限制我们的回调到只处理某一特定的URL
    18   $(document).ajaxComplete(function(event,xhr,settings){
    19      if(settings.url=="text.html"){
    20           $(".log").text("Ajax执行了!"+xhr.responseHTML);
    21      }
    22   });
    23   //当ajax请求完成后显示一个信息(当执行完一个ajax函数就执行)
    24   $(document).ajaxComplete(function(event,request,settings){
    25      $(".msg").append("<p>ajax请求完了!</p>");
    26   });
    27   //其他注意事项
    28   //当$global=false;调用$.ajax()或者$.ajaxSetup(),$ajxComplete()方法将不会触发
    29 })
    View Code

    .ajaxError()

    Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event。

    js代码

     1 $(document).ready(function(){
     2 /**************.ajxError()***************/
     3   $(".ajaxError").click(function(){
     4       $(".lesson2-result").load('text3.html');
     5   });
     6 
     7   $(document).ajaxError(function(){
     8     $(".lesson2-msg").text("Error!");
     9   });
    10   //区分执行出错的文件
    11   //其实括号里面的参数也可以写成(event,xhr,setting)
    12   $(document).ajaxError(function(event,xhr,settings,exception){
    13     if(settings.url=='text3.html'){
    14     $(".lesson2-msg").text("this text3.html file nofinde!");
    15     }
    16   });
    17   //其他注意事项
    18   //当$global=false;调用$.ajax()或者$.ajaxSetup(),$ajxComplete()方法将不会触发
    19   //当ajax请求失败时显示一个信息
    20   $(document).ajaxError(function(event,xhr, settings){
    21       $(".lesson2-msg").innerHtml("<p>Error requesting"+settings.url+"</p>");
    22   });
    23 });
    View Code

     DEMO

  • 相关阅读:
    计算机网络拓扑结构
    中继器,集线器,网桥,交换机,路由器
    网络层次模型
    广播域和冲突域
    Tomcat
    Log4j
    Eclipse实用快捷键
    WebService是什么?
    定时任务处理-Quartz
    MySQL内存表-临时表
  • 原文地址:https://www.cnblogs.com/leeten/p/3597451.html
Copyright © 2020-2023  润新知