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>