BBS项目笔记之七:Ajax实现帖子回复

这儿的Ajax用到jQuery+json , 这种组合比单用Ajax更好

一:起点终点

回贴数据流的起点和终点很简单 :

<td><span class="henhong">回复主题：</span><br />
<textarea rows="6" cols="90" name="reply.content" id="replyContent"></textarea>

public void addReply(Reply reply) {
this.save(reply);
}

中间用到Ajax的部分是重点

二:jQuery实现Ajax提交

编辑好帖子回复以后, 提交时进入此函数

1.serialize()方法是把所接受的数据串行化, jQuery官方举的例子是把单选多选文本等信息放在一起 ,然后serialize

2. ..trim和val()之前用过, 是去掉空格 和取值

3.$.ajax 也就是 $.getJSON

$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。
Json用{}大括号表示k-v对, 其中: url就是要提交的action , data就是刚刚序列化的数据 ,success参数里自己定义一个回调函数
到此, Ajax准备和提交部分就完成了 , 等action接收和处理完 还会再回来的 等下再说 ,
按数据流先到action上

function addReply() {
// 序列化回复表单数据
var data = $('#addReplyForm').serialize();
// 校验回复内容
var replyContent = $.trim($('#replyContent').val());
if (!replyContent) {
alert('回复内容不能为空');
return;
}
// 异步提交数据
$.ajax( {
type : 'POST',
url : 'replyAction_addReply',
processData : true,
datatype : 'json',
data : data,
success : function(result) {
// 追加回复信息
var json = eval('(' + result + ')');
if (json.success == true) {
var template = $('#replyItemTemplate').html().replace(
'userName', json.userName).replace('replyTime',
json.replyTime).replace('content', json.content);
$('#replySet')[0].innerHTML = template
+ $('#replySet')[0].innerHTML;
if ('${session.currUser.userId}' == '<s:property value="article.user.userId"/>') {
var replyCount = new Number($('#replyCount').text());
$('#replyCount').text(replyCount + 1);
}
addReplyForm.reset();
} else {
alert(json.msg);
}
}
});
}

三:action接收Ajax提交,然后返回给页面

这里的JsonKit只是把string原样输出了回去

验证一下, 然后组装一个Json的k-v对象 返回去

public String addReply() {
User currUser = this.getCurrUser();
if (currUser == null) {
JSONKit.outJSONInfo("{success:false,msg:'你还没有登录,不能回复'}");
return NONE;
}
this.reply.setReplyTime(new Date());
this.replyDao.addReply(reply);
JSONKit.outJSONInfo("{success:true,'userName':'"
+ currUser.getUserName() + "','replyTime':'"
+ this.getNowTime() + "','content':'"
+ this.getReply().getContent() + "'}");
return NONE;
}

public static void outJSONInfo(String info) {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/html;charset=UTF-8");
try {
PrintWriter out = response.getWriter();
out.println(info);
out.flush();
} catch (IOException e) {
}
}
}

四:页面接收Json

1.eval()用来解析Json (需要遍历的话 要用each)

2.回调成功就会去更改replyItemTemplate节点的数据 .改成真正的:userName于replyTime回复到

3.innerHTML用于获得和更改表单中的数据

4. 然后把回复的计数replyCount取出来 ,+1

5.最后只重置回复部分的表格 也就是:addReplyForm.reset();

success : function(result) {
// 追加回复信息
var json = eval('(' + result + ')');
if (json.success == true) {
var template = $('#replyItemTemplate').html().replace(
'userName', json.userName).replace('replyTime',
json.replyTime).replace('content', json.content);
$('#replySet')[0].innerHTML = template
+ $('#replySet')[0].innerHTML;
if ('${session.currUser.userId}' == '<s:property value="article.user.userId"/>') {
var replyCount = new Number($('#replyCount').text());
$('#replyCount').text(replyCount + 1);
}
addReplyForm.reset();
} else {
alert(json.msg);
}
}

被改的模版

<!--单条回复信息模板 -->
<div id="replyItemTemplate" style="display: none;">
<table width="100%" border="1" cellpadding="1" cellspacing="1"
bordercolor="#FFFFFF" bgcolor="#527800">
<tr>
<td height="20" bgcolor="#FFFFFF">userName于replyTime回复到：<br />
<div style="font-size: 6">content</div>
</td>

</tr>
</table>
</div>

从这儿取最新一条回复 然后取出回复总数

<div id="replySet"><!-- 回复信息集合 --> <s:iterator
value="article.replies" status="st" id="reply">
<table width="100%" border="1" cellpadding="1" cellspacing="1"
bordercolor="#FFFFFF" bgcolor="#527800">
<tr>
<td height="20" bgcolor="#FFFFFF"><s:property
value="#reply.user.userName" />于<s:date name="#reply.replyTime"
format="yyyy-MM-dd hh:mm:ss" />回复到： <br />
<div><s:property value="#reply.content" /></div>
</td>
</tr>
</table>
</s:iterator></div>