关于jQuery的Ajax操作

最新推荐文章于 2024-02-17 13:45:00 发布

静默不语

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量331

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天和大家分享下JQuery中的Ajax操作

JQuery是什么？

是一个JavaScript类库，封装了大量的JavaScript底层代码。

JQuery是如何操作Ajax的？

底层方法

$selector.load(..) 该种方法了解即可
$.ajax(..);

            对JavaScript底层Ajax操作进行了封装，提供了两种方法进行操作底层的$.ajax()操作
                $.get(..);
                $.post(..);

[html]view plaincopy 
   
 <script>  
         $.ajax({  
             url:"url",// 请求地址  
             type:"get",  
             data:{// 传递参数  
                 username:"admin",  
                 password:"123123"  
             },  
             dataType:"json",  
             error:function() {/*请求失败时的操作*/  
                 // 系统超时等错误提示  
             },  
             success:function(data){/*请求成功时的回调函数*/  
                 // dom操作，处理数据  
             }  
         })  
   
         $.get(  
             "url",  
             {username:"admin", password:"123"},  
             function(data){  
   
             }  
         );  
         $.post(  
             "url",  
             {username:"admin", password:"123"},  
             function(data){  
   
             }  
         );  
     </script>  

事件委托：

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，事件委托自然浮出了水面。jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。

具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

.bind()

假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件：

[html]view plaincopy 
   
 $("info_table td").bind("click", function(){/*显示更多信息*/});  

.live()

只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：

[html]view plaincopy 
   
 $("#info_table td").live("click",function(){/*显示更多信息*/});  

到目前为止，一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：

$()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table
td").live...可以，但$("#info_table").find("td").live...不行；

解决方法：

[html]view plaincopy 
   
 (function($){  
     $("#info_table td").live("click",function(){/*显示更多信息*/});  
 })(jQuery);  

.delegate()

[html]view plaincopy 
   
 $("#info_table").delegate("td","click",function(){/*显示更多信息*/});  

但是

如果使用事件委托时，如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

如果页上的标签~有可能存在未来元素，使用事件委托的方式进行事件绑定

        $selector.bind("click", fn)   不支持未来元素
        $selector.live(...) 支持未来元素~ 但是JQ在1.8版本以后废弃了！
        $selector.delegate(...) 支持未来元素，是一个过渡方法，不建议使用了
        $selector.on(...) 不支持/支持未来元素，常规方式，也是官网推荐方式

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Title</title>  
     <script src="jquery-2.2.4.js"></script>  
     <script>  
         $.ajax({  
             url:"url",// 请求地址  
             type:"get",  
             data:{// 传递参数  
                 username:"admin",  
                 password:"123123"  
             },  
             dataType:"json",  
             error:function() {/*请求失败时的操作*/  
                 // 系统超时等错误提示  
             },  
             success:function(data){/*请求成功时的回调函数*/  
                 // dom操作，处理数据  
             }  
         })  
   
         $.get(  
             "url",  
             {username:"admin", password:"123"},  
             function(data){  
   
             }  
         );  
         $.post(  
             "url",  
             {username:"admin", password:"123"},  
             function(data){  
   
             }  
         );  
     </script>  
 </head>  
 <body>  
     <ul id="classType">  
         <li>原来页面上就有的元素</li>  
     </ul>  
     <script>  
         $(function() {  
             $.get("http://datainfo.duapp.com/shopdata/getclass.php",function(data){  
                 var _jsonArr = JSON.parse(data);  
                 $.each(_jsonArr, function(index, value) {  
                     var $li = $("<li>").addClass("active");  
                     $li.text(value.className);  
                     $("#classType").append($li);  
                 });  
             })  
         });  
        $("#classType").on("click", "li", function() {  
            alert("事件委托的方式，支持未来元素");  
        })  
     </script>  
 </body>  
 </html>  

静默不语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于jQuery的Ajax操作

今天和大家分享下JQuery中的Ajax操作JQuery是什么？是一个JavaScript类库，封装了大量的JavaScript底层代码。 JQuery是如何操作Ajax的？底层方法 $selector.load(..) 该种方法了解即可 $.ajax(..)
复制链接

扫一扫