beetl Ajax局部渲染，多ajax，几个ajax

首先介绍一下beetl，beetl是一款优秀的国产模板框架， 他的性能优越，易学易用，比freemarker的模板框架更加优秀，更重要的是他的活力性更强，在不断更新中。（这都是大赋自己说的。。23333）

好了回到正题，在java开发中普通经常用到ajax，比如登陆，比如翻页，但是复杂的HTML代码拼接令人头疼，beetl提供了一个非常不错的解决方案，我暂且叫他“局部渲染”。

传统的ajax我就不说了，大家都知道HTML拼接和创建dom对象的麻烦程度。我们看一下Beetl是怎么做的：

beetl2.2开始支持ajax渲染，使用的方式就是在需要ajax渲染的代码用

#ajax name : {
}

包裹起来,name相当于一个标记，这个块的名称。需要单独渲染这个块的时候只需要在模板名称后面加上 #name就能单独渲染这一块，返回的是渲染好的html。但是渲染时后面没有加#name的话，beetl就不会理会#ajax name : {}这个标记，而直接渲染整个页面，#ajax name : {}大括号里面的东西同样会被渲染。

下面我们来看一个例子：

head.html代码片段:

<div class="header">
    <%#ajax userInfo: { if(isEmpty(session.user)) {%>
        <a href="#">注册</a>
        <% } else { %>
        <a href="#"> ${session.user.name!} </a> | 
        <a href="/user/logout">注销</a>
    <% } }%>
</div>

这里需要渲染的块叫userInfo，用来处理登陆信息，后台渲染的地址为head.html#userInfo,下面是用jfinal写的后台代码：

    @Before({AjaxCodeValidator.class,AjaxUserLoginValidator.class})
    public void ajaxLogin() throws Exception {
        User user = getModel(User.class);
        User u = user.findByMailAndPassword();
        if (null != u) {
            keepUser(u);
        } else {
            renderJson("{\"state\":\"userError\",\"msg\":\"请输入正确的账号密码！!\"}");
            return;
        }
        String url = getPara("url","");
        if(url.equals("")){
            renderJson("{\"state\":\"success\",\"msg\":\"登陆成功!\"}");
        }else {
            //登陆成功，且有url则渲染url
            render(url);
        }
    }

我这里最后是渲染的一个从前台取出来的URL,因为在不同 的页面登陆URL也不一样，所以我们看一下前台的登陆js代码：

function ajaxLogin() {
        var name = $("input[name='name']").val();
        var password = $("input[name='password']").val();
        var code = $("input[name='code']").val();
        $.post("/user/ajaxLogin", {
            "user.mail" : name,
            "user.password" : password,
            "code" : code,
            "url" : "/head.html#userInfo"//传了一个url给后台
        }, function(data) {
            if(isJson(data)){
                if (data.state != "success") {
                    $("#msg").text(data.msg);
                    if (data.state == "userError") {
                        changeCode();
                    }
                }
            }else{
                /*返回来的data不是json对象的时候，就说明登陆成功，
                那么返回来的便是，beetl局部渲染的html代码，所以要把代码写入页面中*/
                $(".l_s").html(data);
                closeBg();
                removeCommitDisplay();
            }
        });
    }

我这里用的是jquery写的ajax，得到返回的html代码的时候记得写入页面中。但是问题来了，当我一个页面需要渲染两次的时候怎么办呢？这个问题我跟大赋说过，大赋正在改进中，不过这怎么能难倒聪明的我们呢，于是我们想出了一个折中的方法，就是专门写一个请求，用来做局部渲染，一个页面中几块需要渲染就请求几次，js代码如下：

/***
 * beetl json的方式load页面
 */
loadHtml = function (id,url){
    $.post("/common/load", //这个是请求地址
    {
        "url" : url//这个url是传给后台的参数
    }, function(data) {
        $(id).html(data);
    });
};
/***
 * 判断返回是否json格式（顺便把上面用到的判断是否为JSON格式对象贴出来）
 */
isJson = function(obj){
    var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
    return isjson;
};

后台java代码(jfinal写的)如下：

public class CommonController extends Controller{

    public void load(){
        render(getPara("url"));
    }

}

于是，我在一个页面中ajax登陆，两个地方都能渲染了，代码如下：（假定所在页面是videoPlayer.html，头部页面是/common/_header.html）

function ajaxLogin() {
        var name = $("input[name='name']").val();
        var password = $("input[name='password']").val();
        var code = $("input[name='code']").val();
        $.post("/user/ajaxLogin", {
            "user.mail" : name,
            "user.password" : password,
            "code" : code,
            "url" : "/article/videoPlayer.html#userInfo"
        }, function(data) {
            if(isJson(data)){
                if (data.state != "success") {
                    $("#msg").text(data.msg);
                    if (data.state == "userError") {
                        changeCode();
                    }
                }
            }else{
                $(".l_s").html(data);
                loadHtml(".middle","/common/_header.html#userInfo");
                closeBg();
                removeCommitDisplay();
            }
        });
    }

大家肯定奇怪两个地方都是userInfo，当然这个名字你取不同的名字肯定是可以的，只要你传过去后台的名字和前台的块对应就OK（但是同一个页面绝对不能出现两个一样的名字），请看videoPlayer.html的局部代码

<!-- Header -->
<%include("/common/_header.html",{}) {}%>

<div class="l_s">
    <%#ajax userInfo :{if(isEmpty(session.user)){%>
        请登录再评论。
        <a href="javascript:showBg();">登陆</a> <span>|</span>
        <a href="register.action">注册</a> <%}else{%> 
        <a href="#">${session.user.name!}</a>
        <span>|</span> <a href="/user/logout">注销</a> <%}}%>
</div>

截个图给大家看看

最后给出大赋官方的例子，大家一切以官方文档为主哈

http://beetlajax.oschina.mopaas.com/

beetl官网

http://ibeetl.com/