beetl ajax 局部渲染demo

java 后台处理部分

public void  ajax(){
        //获取当前页
        Integer pageNumber = getParaToInt("page",1);
        //局部刷新块的名字
        String refresh = getPara("refresh");
        //默认需要跳转的界面
        String url = "/demo/ajax.html";
        if(StringUtils.isNoneBlank(refresh)){
           url+="#"+refresh;
           // /demo/ajax.html#token
        }
        Page<Record> list =userService.paginate("xxxx_user",pageNumber,10);
        setAttr("user", list.getList());
        setAttr("page",pageNumber);
        render(url);
    }

前台页面部分 

 <div class="content-any" id="ajaxList">
                <!--#
                /*
                * token为局部渲染块的名字,该名字将传到后将进行url的封装
                */
                #ajax token: {
                -->
                <table class="ui table segment">
                    <tr><td width=100>Id</td><td width=100>token</td></tr>
                    <!--#
                    for(u in user)
                    {
                    -->
                    <tr><td>${u.id!}</td><td>${u.nickname!}</td></tr>
                  <!--#
                    }
                   -->
                </table>
                当前页面<span id="current">${page!1}</span><span style="width:20px"></span>
                <a href="#"><span  class="page">next</span></a> <a href="#" ><span  class="page">pre</span></a>
                <!--#
               }
              -->
           </div>

$(document).ready(function(){
            $(document).on('click','.page',function(){
                var action = $(this).html();
                var current = parseInt($("#current").html());
                var page = current;
                if(action=="next"){
                    page++;
                }else{
                    page--;
                }

                $("#ajaxList").load("${base}/demo/ajax",{"page":page,refresh:'token'},function(data){
                   // console.log(data);
                });
            });
        });

效果图1

效果图2

参数部分

服务器响应