struts2结合jquery的Ajax应用
前言
最近尝试在Google App Engine（GAE）平台上构建一个blog，目前进度已经完成将近50%，其中Css和DIV布局折腾得我够呛，对UI一向是个外行，色感拿捏实在没谱，只好仿造Wordpress了--_--||；
为何采用AJAX：
回复是在blog文章阅读中的一个常见的功能，如CSDN的回复等等，但是因为回复内容不多，甚至大多数时间有些朋友经常会仅仅留下mark一下，于是决定在此部分采用ajax刷新；
而本身此Blog系统采用的框架是struts2+JPA，利用ThreadLocal进行事务处理；UI端采用Jquery作为JS框架；
前端界面
1) 首先编写评论提交表单：
外观如下：
为提交表单按钮绑定如下事件：
function sendComment(){
$.ajax({
url:'<%=root%>/system/commentSaver.action',
data:{
'articleId':$('#articleId').val(),
'comment.name':$('#name_comment').val(),
'comment.email':$('#email_comment').val(),
'comment.page':$('#page_comment').val(),
'comment.content':$('#content_comment').val()
},
dataType:'json',
success:function(data){
if(data.result){
showComment(data,$('.article_comments'));
$('#name_comment').val('');
$('#email_comment').val('');
$('#page_comment').val('');
$('#content_comment').val('');
}else{
alert("：( 评论失败！");
}
}
});
}
$('#submit_comment').click(function(e){
sendComment();
});
提交的时候，将评论表单中的值取出发送给后台，中间包括一个当前文章的ID值，以便后台区分是对那篇文章进行了评论；
后台返回数据格式是JSON，中间返回了一些列评论的内容，包括评论时间以及评论的IP，为了使得前端后端时间统一，评论时间由后台取得；
获取的了评论内容后，利用showComment函数在页面显示：
var floorCount=<s:property value="article.comments.size()"/>;
var template="<p>"+
'<span class="nickname">#name#</span><span class="comment_date"> at #writeDate# </span><span class="comment_ip">#ip#</span><span>说：</span><span class="floor_info">##floor#</span>'+
"</p>"+
"<div class='comment'>"+
"<table>"+
"<tr>"+
"<td width=50 height=50 valign='top'>"+
"<img src='<%=root%>/images/header_comment.png' />"+
"</td>"+
"<td>"+
'#content#'+
"</td>"+
"</tr>"+
"</table>"+
"</div>";
function showComment(data,el){
floorCount++;
var comment=template.replace('#name#',data.name).replace('#writeDate#',data.writeDate).replace('#ip#',data.ip).replace('#content#',data.content).replace('#floor#',floorCount);
el.append(comment);
el.corner("15px");
}
其中template为模板，主要是用于评论内容在页面的布局，整个评论的HTML元素如下：
<div class="article_comments pane">
<h1>
有<s:property value="article.comments.size()" />位网友对这篇文章有点看法:-)
</h1>
<s:iterator value="article.comments" id="comment" status="status">
<p>
<span class="nickname"><s:property value="#comment.name"/></span><span class="comment_date"> at <s:date name="#comment.writeDate" format="yyyy-MM-dd hh:mm"/> </span><span class="comment_ip"><s:property value="#comment.ip"/></span><span>说：</span><span class="floor_info">#<s:property value="#status.index+1"/></span>
</p>
<div class="comment" id='<s:property value="#comment.key.id"/>'>
<table>
<tr>
<td width=50 height=50 valign="top">
<img src="<%=root%>/images/header_comment.png" />
</td>
<td>
<s:property value="#comment.content"/>
</td>
</tr>
</table>
</div>
</s:iterator>
</div>
最后对模板中的变量进行了替换以后，加入到了评论内容的DIV中进行了渲染；
后台服务
后台主要是接受了评论内容，对评论进行了持久化处理，并且将处理结果反馈到前台；
public class CommentAction extends ActionSupport { /** * */ private static final long serialVersionUID = -2652110969455182134L; private CommentService service = new CommentServiceImpl(); private Comment comment; private Long articleId; private boolean result; public InputStream getInputStream(){ String s="false"; if(result){ s="{result:true,id:'"+comment.getKey().getId()+"',name:'"+this.comment.getName()+"',writeDate:'"+Common.parseDate(comment.getWriteDate())+"',ip:'"+comment.getIp()+"',content:'"+comment.getContent()+"'}"; } StringInputStream inputStream=new StringInputStream(s); return inputStream; } public Comment getComment() { return comment; } public void setComment(Comment comment) { this.comment = comment; } public Long getArticleId() { return articleId; } public void setArticleId(Long articleId) { this.articleId = articleId; } public String execute() { result = false; if (comment != null && articleId != null) { comment.setWriteDate(new Date()); comment.setIp(ServletActionContext.getRequest().getRemoteAddr()); result = service.saveComment(articleId, comment); } result=true; return SUCCESS; } }
此处直接采用了Response进行了处理，即是采用了stream的results tyoe,因为数据量不大，于是在此书就直接与response进行了耦合，反馈了数据，避免了为此特地编写jsp页面；
Struts.xml配置如下：
<action name="commentSaver" class="org.corey.share.business.CommentAction"> <result name="success" type="stream"></result> </action>
没有做的事情：
l 没有对评论进行有效验证，前台需要做，后台也需要做；
l 在评论请求的发送过程中间，没有对屏幕进行友好的提示，如加载标识等等；
l 希望在评论以后，能之间定位到评论内容，如采用滚动条自动滚动等等；
<form name="comment_form">
<input name="articleId" id="articleId" type="hidden" value='<s:property value="article.id" />'/>
<div class="comment_item">
<label>
昵称：
</label>
<input name="comment.name" id="name_comment" />
</div>
<div class="comment_item">
<label>
邮件地址：
</label>
<input name="comment.email" id="email_comment" />
</div>
<div class="comment_item">
<label>
主页地址：
</label>
<input name="comment.page" id="page_comment" />
</div>
<div class="comment_item">
<h3>
评论(必填)
</h3>
<textarea name="comment.content" id="content_comment"></textarea>
</div>
<div class="comment_item">
<input type="button" value="评论" class="submit_btn" id="submit_comment">
</div>
</form>
</div>