thinkphp+ajax+jquery异步实现加载更多

1.后台请求的方法(这里主要赋模板，再查出总页数)

public function _initialize(){
parent::_initialize();
$this->model['farm'] = D('farm');
$this->model['farmnums'] = M('FarmNums');
$this->pagesize = 8;
}
//菜园列表
public function flist(){

$t = D('FarmListView');
$data = $t->field(true)->order('id desc')->select();
$pagesize = $this->pagesize;
$totals= count($data);
$total_pages = ceil($totals/$pagesize); #计算总页面数
$this->total_pages = $total_pages;
$this->assign('fname',$fname);
$this->display();
}

2.模板中，将异步加载的内容全部赋在id为results的div里面，内容在php中拼接

<div class="cd-show" id="results">
</div>

<div class="pages wbox" id="more_contents">
<a href="javascript:;" class="load_more" id="load_more_button">加载更多</a>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = {$total_pages};
var url = "__URL__/data";
$('#results').load(url, {'page':track_click}, function() {track_click++;}); //initial data to load

$(".load_more").click(function (e) { //user clicks on button

$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image

if(track_click <= total_pages) //make sure user clicks are still less than total pages
{
//post page number and load returned data into result element
$.post(url,{'page': track_click}, function(data) {
//alert(data);exit();

$(".load_more").show(); //bring back load more button

$("#results").append(data); //append data received from server

//scroll page to button element
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);

//hide loading image
$('.animation_image').hide(); //hide loading image once data is received

track_click++; //user click increment on load button

}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError); //alert any HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});


if(track_click >= total_pages-1)
{
//reached end of the page yet? disable load button
$("#more_contents").css("display", "none");
}
}

});
});
</script>

3.ajax请求的方法

public function data(){
$t = D('FarmListView');
$item_per_page = $this->pagesize; //每页的条数
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}

//起始位置
$position = ($page_number * $item_per_page);

$data = $t->field(true)->order('id desc')->limit($position,$item_per_page)->select();
// p($data);exit();
echo '<ul>';
foreach($data as $k=>$v){
echo '<li id="item_'.$v["fid"].'">';
echo '<a href="'.U("Farm/detail/",array("id"=>$v[fid])).'">';
echo '<div class="pr">';
echo '<div class="cd-img"><img src="'.__ROOT__.C('UPDATE_PATH').$v["fimg_url"].'"0 /></div><div class="cd-name">'.$v[title].'</div></div>';
echo '<div class="cd-xx wbox"><span class="wfl"><em class="jg">'.$v[farm_price].'</em>元<em class="dw">(一茬)</em></span><span class="wfl syf">剩余：'. intval($v['farm_sarea']/10) .'份</span></div></a>';
echo '</li>';
}
echo '</ul>';

}
————————————————
版权声明：本文为CSDN博主「魁兄」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zuokuikui/article/details/45397329