thinkphp3.2 ajax 点击加载更多

2020-07-05 网络

thinkphp3.2 ajax 点击加载更多，类似手动方式的瀑布流，无刷新式加载分页，其实现方法如下：

控制器中分别写两个方法：index和index_more方法，其中index方法加载的数据为打开页面时加载的数据，index_more方法则是根据用户的点击依次显示指定页的记录，以刷新方式显示在页面底部。

控制器代码：

	//打开页面时加载数据
	public function index(){
		$list=M('post')->limit(0,5)->select();		//默认先加载5条记录   
		$this->assign('list',$list);
		$this->display();
	}
	
	//根据用户点击时加载数据
	public function index_more(){      
		$id=I('id');
		if(!is_numeric($id)){
			$id=0;
		} 
		$p=$id*5;
		$list=M('post')->limit($p,5)->select();		//根据页面的点击，每次点击加载5条
		$this->assign('list',$list);
		$this->display(); 
	}

index对应的模板页面：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>thinkphp3.2 ajax 加载更多</title>
<script type="text/javascript" src="引入jquery文件地址"></script>
</head>
<div class="page_list">
    <!--文章列表-->
    <ul id="ul">
        <volist name="list" id='vo'>
        <li>                            
            <h3><a>{$vo.title}</a></h3>                               
        </li>
        </volist>
    </ul>
</div>
<div class="page_more">点击加载更多</div>

<script type="text/javascript">
$(document).ready(function(){
	var p=0;
	$('.page_more').click(function(){
		p+=1;          
		$.ajax({
			type:"post",
			url:"{:U('Index/index_more')}",    //加载更多时请求的控制器地址
			data:{'id':p},
			async:true,
			success:(function(data){
				if(data == 0){
					$(".page_more").html('没有更多了'); } else {
				var moreinfo=$(".page_list ul").html();
					$(".page_list ul").html(moreinfo+data);
					$('.page_list ul').show();
				}
			}),
		});
	});
})
</script>

index_more方法对应的模板页面：

<volist name="list" id='vo' empty='0'>
<li>
	<h3><a>{$vo.title}</a></h3>
</li>
</volist>