JQuery ajax实现异步分页
2018-06-25 本文已影响0人
bboyAyao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul id="content">
</ul>
<p id="page">
</p>
<script>
function page(page_now=1) {
$.ajax({
'type':'get',
'url':'/heroinfo_page/'+page_now,
'success':function (data){
var heroinfo_list = data.heroinfo_list
var lis = ''
$.each(heroinfo_list,function (index,value) {
var id = value['id']
var hname = value['hname']
lis += '<li>' + hname +'</li>'
})
$('#content').html(lis)
var page_list = data.page_list
var as = ''
$.each(page_list,function (index,value) {
var page_now = value
as += '<a href="' + page_now + '" title="' + page_now + '" onclick="return false">' + page_now + '</a>'
})
$('#page').html(as)
},
//在服务器响应之前处理一些函数
'beforeSend':function(xhr){
$('#content').html('<img src="/static/images/加载中.gif"/>')
}
})
}
$(function (){
page()
$('#page').delegate('a','click',function(){
page(this.title)
})
})
</script>
</body>
</html>
