JQuery中的Ajax操作

最新推荐文章于 2018-06-19 23:08:11 发布

阿脆脆脆脆脆

最新推荐文章于 2018-06-19 23:08:11 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/CUILINA1994/article/details/71056451

版权

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

JQuery是什么？

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

JQuery是如何操作Ajax的？

底层方法

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

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

<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事件：

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

.live()

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

$("#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...不行；

解决方法：

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

.delegate()

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

但是

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

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

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

<!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(..);
复制链接

扫一扫