首先介绍一下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 {
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" , {
"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的局部代码
<%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 >
截个图给大家看看
最后给出大赋官方的例子,大家一切以官方文档为主哈
beetl官网