您的位置：首页 > Web前端 > JQuery

JQuery中的Ajax操作

2017-05-01 16:04 134 查看

今天和大家分享下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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航