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