javascript - 自己研究的分页，感觉ajax这里写的不太好，如何改进；
本文介绍了javascript - 自己研究的分页，感觉ajax这里写的不太好，如何改进；的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="page.css">
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;
line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;
margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
ul{
list-style: none;
}
.wrap >ul > li{
width: 250px;
height: 350px;
margin: 20px;
/*border: 1px green solid;*/
float: left;
margin-bottom: 40px;
}
.wrap >ul > li>img{
width: 100%;
height: 100%;
}
.wrap >ul > li>p{
text-align: center;
line-height: 30px;
height: 30px;
}
.wrap{
margin: 100px auto;
border: 1px solid red;
height: 1800px;
width: 1460px;
}
</style>
<body>
<div class = 'wrap'>
<ul class='movieList'>
<!--<li>-->
<!--<img src="" alt="">-->
<!--<p>电影名：惊天魔盗团</p>-->
<!--</li>-->
</ul>
<!-- 代码部分begin -->
<div class="tcdPageCode">
</div>
</div>
</body>
</html>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>
<script>
$(function () {
//初始化第一页数据；
var urlApi = 'http://api.douban.com/v2/movie/top250'
$.ajax({
url:urlApi,
type:'get',
dataType:'jsonp',
data:{
//从第几条开始请求；
"start" : 0,
//请求多少条数据
"count" : 10
},
success:function(data){
//total总条数属性，计算总页数；
var total = parseInt(data.total/10);
result = data.subjects;
var str='';
for(var i=0;i<result.length;i++){
var item = result[i];
str += '<li><img src="'+item.images.large
+'" alt=""><p>'+item.title+'</p></li>'
}
//追加渲染到页面
$('.movieList').append(str)
//分页插件，
$(".tcdPageCode").createPage({
//pageCount：总页数
pageCount:total,
//current：当前页
current:1,
backFn:function(pageIndex){
//单击回调方法，pageIndex是当前页码
$(".movieList").empty();
var start = 10*pageIndex;
$.ajax({
url:urlApi,
type:'get',
dataType:'jsonp',
data:{
"start" : start,
"count" : 10,
},
success:function(data){
var result = data.subjects;
var str='';
for(var i=0;i<result.length;i++){
var item = result[i];
str += '<li><img src="'+item.images.large
+'" alt=""><p>'+item.title+'</p></li>'
}
$('.movieList').append(str)
}
})
}
});
}
})
})
</script>解决方案
把js部分重构了，ajax部分重复，抽出来当一个函数，
另外，把每页大小作为常量了
$(function () {
//初始化第一页数据；
var urlApi = 'http://api.douban.com/v2/movie/top250',
current = 1, // 当前页
pageSize = 10; // 每页大小
var download = function(start) {
console.log(pageSize)
// ajax 请求数据
$.ajax({
url:urlApi,
type:'get',
dataType:'jsonp',
data:{
//从第几条开始请求；
"start" : start,
//请求多少条数据
"count" : pageSize
},
success:function(data) {
//total总条数属性，计算总页数；
var total = parseInt(data.total/10),
result = data.subjects,
str='';
for(var i=0;i<result.length;i++){
var item = result[i];
str += '<li><img src="'+item.images.large
+'" alt=""><p>'+item.title+'</p></li>'
}
//渲染到页面（不使用append）
$('.movieList').html(str);
//分页插件，
$(".tcdPageCode").createPage({
//pageCount：总页数
pageCount:total,
//current：当前页
current:current,
backFn:function(pageIndex){
//单击回调方法，pageIndex是当前页码
$(".movieList").empty();
var start = 10*pageIndex;
current = pageIndex; // 页数
download(start);
}
});
}
})
}
// 请求第一页数据
download(0);
})这篇关于javascript - 自己研究的分页，感觉ajax这里写的不太好，如何改进；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
