这儿的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.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>原文链接：https://www.f2er.com/ajax/166902.html
