首先介绍一下beetl,beetl是一款优秀的国产模板框架, 他的性能优越,易学易用,比freemarker的模板框架更加优秀,更重要的是他的活力性更强,在不断更新中。(这都是大赋自己说的。。23333)
好了回到正题,在java开发中普通经常用到ajax,比如登陆,比如翻页,但是复杂的HTML代码拼接令人头疼,beetl提供了一个非常不错的解决方案,我暂且叫他“局部渲染”。
传统的ajax我就不说了,大家都知道HTML拼接和创建dom对象的麻烦程度。我们看一下Beetl是怎么做的:
beetl2.2开始支持ajax渲染,使用的方式就是在需要ajax渲染的代码用
@H_403_12@#ajax name : { }
包裹起来,name相当于一个标记,这个块的名称。需要单独渲染这个块的时候只需要在模板名称后面加上 #name就能单独渲染这一块,返回的是渲染好的html。但是渲染时后面没有加#name的话,beetl就不会理会#ajax name : {}这个标记,而直接渲染整个页面,#ajax name : {}大括号里面的东西同样会被渲染。
下面我们来看一个例子:
<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 {
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"
},function(data) {
if(isJson(data)){
if (data.state != "success") {
$("#msg").text(data.msg);
if (data.state == "userError") {
changeCode();
}
}
}else{
$(".l_s").html(data);
closeBg();
removeCommitDisplay();
}
});
}
我这里用的是jquery写的ajax,得到返回的HTML代码的时候记得写入页面中。但是问题来了,当我一个页面需要渲染两次的时候怎么办呢?这个问题我跟大赋说过,大赋正在改进中,不过这怎么能难倒聪明的我们呢,于是我们想出了一个折中的方法,就是专门写一个请求,用来做局部渲染,一个页面中几块需要渲染就请求几次,js代码如下:
/*** * beetl json的方式load页面 */
loadHtml = function (id,url){
$.post("/common/load",
{
"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"));
}
}
function ajaxLogin() {
var name = $("input[name='name']").val();
var password = $("input[name='password']").val();
var code = $("input[name='code']").val();
$.post("/user/ajaxLogin","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的局部代码
<%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>
@H_681_
403@截个图给大家看看
最后给出大赋官方的例子,大家一切以官方文档为主哈
beetl官网