Jquery+php+mysql实现上拉加载更多，后端CI，超详细，有示例（其实就是ajax无刷新分页）

    来吧，今天不玩虚拟机了，改代码了，今天在公司做了个小东西挺有意思，上拉加载更多，用ajax实现的，不复杂，关键的一两个点想明白了就通了。不多说了，这会还在公司呢.......快快上代码：

前端代码：

/*
*** @author By Shiva
*** Created
*/
/*需要jquery支持哦*/
<script type="text/javascript">
//Let's Go
$(function(){
/*起始页数，每页显示数据已经在后台写死*/
var curPage = 1;
/*需要查询的数据类型，比如是新闻，还是公告，呵呵*/
var newsType = 1;
$(window).on('scroll',function(){
/*判断当前浏览器高度，滚动条碰到时触发*/
if($(window).scrollTop()>=$(document).height()-$(window).height()){
/*当前选中的链接会有一个class样式，根据这个来抓取当前的type值*/
var cid = $(".cur").attr("type");
/*如果ajax没有请求到数据直接return*/
if($(".loading").length) return;
/*每触发一次就给当前页数加 1*/
curPage++;
/*给后端发送需要的数据*/
var postData = {
newsType:cid,
page:curPage,
};
$.post("ajax", postData, function(response){
$('#info').html("<div class='loading'>正在加载,请稍后...</div>");
/*判断是否有数据*/
if (response.news.length)
{
var datastr = '';
for(var i in response.news){
datastr += '需要拼接的数据'；

}
/*将数据追加到对应的元素标签下*/
$('对应的元素标签').append(datastr);
}
else
{ /*前端需要显示的地方自己去写一个div id=info*/
$('#info').html("<div class='loading'>没有更多内容</div>");
setTimeout(function(){
if($(".loading").length) $('#info').html('');
},800)
}
}, 'json');
}
});
});
</script>


后端代码(这里是基于CI框架的后端方法，其实都是相通的)：

<?php
public function ajax()
{       /*接收前端发送过来的数据*/
$page = $this->input->post("page");
$newsType = $this->input->post("newsType");
/*后端加载数据模型*/
$this->load->model('news_model');
/*每页显示数据量*/
$perPage = 10;
/**分页相关计算/
$recordCount = $this->news_model->getCount($newsType, "");
$pageCount = ceil($recordCount / $perPage);
$news = array();
if ($page &
4000
lt;= $pageCount)
{
if ($page < 1) $page = 1;
/*查询组装自己的数据*/
$news = $this->news_model->listAll($page, $perPage, $newsType, "", 1, time());
foreach($news as $k=>$n)
{
$news[$k]['create_time'] = date('Y-m-d', $n['create_time']);
}
}
/*给前端返回数据*/
echo json_encode(array('news'=>$news));
}

    ok,到这里就结束了，没什么多余要说的，要细细看一下我前面js里的那个 if($(".loading").length) return;这个其实挺重要的，控制了是否请求到了数据的操作，同时当没有数据的时候也会停止发送ajax请求，就我个人来说是很不错的一个判断。当然了我这里的需要很简单，只是输出文字而已。如果你需要上拉加载图片什么的，建议去使用懒加载。写代码嘛，先手写原生的来，再去搞插件。