最近做了一个手机端的需求,里面有一个需要使用到ajax无刷新加载数据这样的功能
老样子先展示所需要实现的功能,
里面的数据是我的测试数据,随意了一点,但是能解决问题就行了,不要在意
正题来了:
首页就是当第一次访问的数据的时候,页面会加载出一部分数据,当你点击查看更多的时候会加载出另外一部分数据
如下图所示:
这时2数据有七条,仔细看一下第一张图的数据只有5条
当再次点击的时候按钮就会变成没有更多的信息了,因为我总共添加了七条数据
、
具体的实现手法很简单就是利用ajax的刷新加载数据
上代码:
1.以为页面比较简答,我就只贴一部分比比较重要的了
按钮的代码:<a href="javascript:void(0);" title="查看更多" id="imore" class="imore">查看更多</a>
请记好这个id值 下面还会用到,到时候别说不知道
3.开始js代码
注意:在这里我使用的jquery的ajax,别忘了在文件中引入jqery文件
代码如下:
<script>
// 首先定义一下page 为 1 因为当也面第一次加载的时候默认加载的数据就是第一页的数据
var page = 1;
function getlist(page) {
$.ajax({
type : 'GET',
// cateid 这个参数根据自己项目的需求传参
ur : '__CONTROLLER__/getlist/' +page+ '/cateid/'+<?php echo I(get.cateid) ?>',
dataType 'json',
success : function(data){
// data 为请求返回的数据 对data 进行遍历
var hrtml = "";
$(data).each(function(k,v) {
// 测试使用
html += '111<br/>';
});
}
});
}
// 刚开始加载的时候调用该函数
getlist(1);
$('#imore').click(funciton() {
getlist(++page);
})
</script>
4.后台处理方法:getlist
public function getlist($p,$cateid) {
// 这里的记载更多其实就是先将数据进行分页处理
// 1.每一页需要显示多少条数据
$perpage = 5;
// 2.每一页的数据从哪一条开始显示
$offset = ($p-1)*$perpage;
$sql = "select * from cs_article where cateid=$cateid limit $offset,$perpage";
$art = M();
$res = $art->query($sql);
$this->ajaxReturn();
}
ok 主要的就是这么多