现在的页面中很多都是采用加载更多方式实现显示信息的拓展。今天个人也做了一个。

我做的时候采用的是ssm框架，如果您不是ssm框架，不要紧，重要的了解如何做，在使用其他的技术实现即可。

先简单说下思路：
我做的这个功能其实也是一个分页，页面加载时，加载第一页的内容，之后每次点击加载更多的时候，就会加载下一页的内容，即点击加载更多，查询出下一页的内容，返回给页面，并追加到页面展示信息的末尾。

实现：

前台：

<a onclick="getMore(this);return false;">加载更多</a>

我的做法是，我的页面每次第一次加载的时候都是加载第一页的10条内容，然后在信息的最后展示一个加载更多按钮。因此定义一个全局变量，默认为第一页，每次点击加载更多的时候，都会将页数加1，传递到后台，查询下一页的内容。将后台返回的分好页的信息追加到页面上。采用ajax的append的方法追加。

<script type="text/javascript">

//我的全局变量
    var page=1;
    
    function getMore(btn){
    	//定义我需要追加的html代码
        var html;
        //页数加1
        page=page+1;
        //发送ajax请求
        $.ajax({
            url:"/index/getmore",
            type:"POST",
            dataType : "json",
            data:{"page":page},
            success :function(result){
            	//成功返回信息时
                if(result.status==200){
                //使用each遍历返回的列表的内容,样式什么的自己拼拼吧，和你页面加载的时候样式一样就好了，把内容改了就ok
                $.each(result.data,function(i,result){
            html=html+'<span class="bloginfo">'+result.articleContent+'</span>'+
             ' <a class="read" target="_blank" href="http://localhost:8087/search/'+result.articleId+'.html">阅读更多</a> </dd>'；
                });
                //拼好之后，我这句代码的意思是，找到当前点击的按钮的父div，即包含他的第一个div，然后在末尾将信息拼接上去
                    $(btn).parent('div').append(html);
                }
                else{
                    alert('没有更多了');
                }
            }
        });
    }

后台：

controller接收前台传入的页面的页数，service进行查询并使用pagehelper进行分页，将传入的页码的信息返回。只返回单页的。


代码：

controller

@RequestMapping(value="/index/getmore",produces="application/json;charset=utf-8")
	@ResponseBody
	public E3Result getMore(@RequestParam("page") int page){
		//页数，显示的条数为5，接收service返回的分号页的结果
		List<BArticles> list= blogService.getArticlesOrderByLikes(page,5);
		//这个是我自己定义的用于返回信息的类（包含数据、状态码、错误信息等）
		E3Result result =new E3Result(list);
		return result;
	}

service

@Override
	public List<BArticles> getArticlesOrderByLikes(int page, int rows) {
				//设置分页信息(该语句只对他之后的第一条查询语句生效)
				PageHelper.startPage(page,6);
				//执行查询			
				List<BArticles> list = bArticlesMapper.selectByExampleWithBLOBs(null);
				//取分页结果
				PageInfo<BArticles> pageInfo = new PageInfo<BArticles>(list);
				//取得分好页的单页结果
				List<BArticles> list2 = pageInfo.getList();
				return list2;
	}

效果：

前台水平一般，只能做成这样了。大家可以多交流

Java实现一个页面支持多人编辑 java怎么实现功能页面_ssm