模仿YII Ajax分页js增量更新代码实现原A链接跳转转化为ajax分页 [ 技术分享 ]
DEMO如下：可复制出去直接执行，后台实现没贴代码了。但是可以借用火狐的firebug监控网络，JS是ajax方式成功调用后台的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="Content-Type:text/html;charset=utf8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.paging").on("click",function(){
$.ajax({
type:"GET",
url:$(this).attr('href'),
dataType:"html",
cache:false,
success:function(data){
//替待html()方法，可以减少多余的重复加载
var $data = $('<div>' + data + '</div>');
//需要替换的元素选择器
var updateId = '.list';
$(updateId).replaceWith($(updateId, $data));
},
error: function (msg) {
//如果Ajax方法报错，采用A标签原始方式提交
return true;
}
});
//屏蔽A标签原始提交
return false;
});
});
</script>
</head>
<body>
<div class='list'>列表内容</div>
<a class='paging' href="/1">1</a>
<a class='paging' href="/2">2</a>
</body>
</html>
希望和大家交流探讨技术。。。
共 0 条回复
没有找到数据。
总监
phpxiebin 上海
注册时间：2015-04-22
最后登录：2019-05-07
在线时长：32小时39分
最后登录：2019-05-07
在线时长：32小时39分
- 粉丝9
- 金钱1701
- 威望35
- 积分2371