近来在实现在做网站的过程当中有一个功能，就是用户需要对网页展示产品进行评论，本来是想用表单来直接
提交，但是想想用表单提交后还需要再返回到产品页面，页面需要进行一次刷新，而且页面展示的数据量太大
，所以就考滤用AJAX来实现，用户也可以选择性的刷新页面，考滤到用户评论的数据可能过长，所以选择使用
POST方法来提交再结合DWR来实现,因为项目中使用了SPRING，所以我这里就使用DWR结合SPRING来实现上述功能
,下面是我的实现过程，首先需要抒写数据层和业务层的实现方法，持久层使用了Hibernate，就是调用了
HibernateDaoSupport模板中的save方法来保存，在这里我不列出该方法代码，首先看下业务层的方法
@Override
public String save(Comments comments) {
if(null != comments){
String content = comments.getCommentContent();
if(!UtilTool.isNull(content)){
try {
/* getContent 方法用于将一个指定的标识潜换为一个表情图片 */
content = getContent(content);
comments.setCommentContent(content);
comments.setCommentTime(UtilTool.currentDate());
getCommentsDao().save(comments);
return "评论成功!!!";
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "评论失败!!!";
}Comments.java 实体类代码,该类中的数据将同步于数据库
@SuppressWarnings("serial")
public class Comments implements java.io.Serializable {
/* 评论ID */
private Integer commentId;
/* 评论用户 */
private String userName;
/* 评论内容 */
private String commentContent;
/* 评论的资源类别,如游戏、软件等 */
private Integer vasId;
/* 资源ID */
private Integer contentId;
/* 评论时间 */
private String commentTime;
public Comments() {
}
// get set 略.....
}接下来展示一下dwr.xml 文件的配置
<create javascript="commentsService" creator="spring"> <param name="beanName" value="commentsService"></param> <include method="save"/> </create> <convert match="com.zhangshang.web.po.common.Comments" converter="bean"> <param name="include" value="userName,commentContent,vasId,contentId"></param> </convert>
这里配置了一个 commentsService，指明获取业务层对象从spring当中获取
这里的说明是在返回的结果实体对象中你需要获取那些属性的参数
最后我们来看一下页面的提交方式，这里最为重要
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/interface/commentsService.js"></script>
<script type="text/javascript">
function saveComments(){
var sourceEditor = document.getElementById("commentContent");
if(sourceEditor.value == ''){
alert("你还没有输入评论!!!");
return;
}
if (typeof window['DWRUtil'] == 'undefined')
DWRUtil = dwr.util;
var formMap = DWRUtil.getValues("commentForm");
commentsService.save(formMap,callBack);
}
function callBack(str){
alert(str);
}
function editor_createImg(face){
document.getElementById("commentContent").value += "[em"+face+"]";
}
</script>
<div id="comment1">
<form name="commentForm" method="post" id="commentForm">
<div class="re_input_main">
<h3>发表评论</h3>
<p class="id_area">
<input type="hidden" name="vasId"
value="${appGame.vasmainTypeList.vasmainTypeId}"/>
<input type="hidden" name="contentId" value="${appGame.contentid}"/>
<input type="hidden" name="vasName"
value="${appGame.vasmainTypeList.vasmainTypeDisplay}"/>
<input type="hidden" name="contentName" value="${ebook.name}"/>
<label for="username">用户名：</label>
<c:choose>
<c:when test="${empty USERNAME}">
<input type="text" name="userName" maxlength="16"
readonly="readonly" id="username" value="游客"/>
</c:when>
<c:otherwise>
<input type="text" name="userName" maxlength="16"
readonly="readonly" id="username" value="${USERNAME}"/>
</c:otherwise>
</c:choose>
</p>
<div class="main_input_area clear">
<textarea id="commentContent" name="commentContent" class="content"></textarea>
<div class="face">
<h4>插入表情</h4>
<ul class="post_face_area clear">
<li>
<a href="javascript:editor_createImg(51);" class="post_face1">表情51</a>
<a href="javascript:editor_createImg(52);" class="post_face2">表情52</a>
<a href="javascript:editor_createImg(53);" class="post_face3">表情53</a>
<a href="javascript:editor_createImg(54);" class="post_face4">表情54</a>
<a href="javascript:editor_createImg(55);" class="post_face5">表情55</a>
<a href="javascript:editor_createImg(56);" class="post_face6">表情56</a>
</li>
<li>
<a href="javascript:editor_createImg(57);" class="post_face7">表情57</a>
<a href="javascript:editor_createImg(58);" class="post_face8">表情58</a>
<a href="javascript:editor_createImg(59);" class="post_face9">表情59</a>
<a href="javascript:editor_createImg(60);" class="post_face10">表情60</a>
<a href="javascript:editor_createImg(61);" class="post_face11">表情61</a>
<a href="javascript:editor_createImg(62);" class="post_face12">表情62</a>
</li>
<li>
<a href="javascript:editor_createImg(63);" class="post_face13">表情63</a>
<a href="javascript:editor_createImg(64);" class="post_face14">表情64</a>
<a href="javascript:editor_createImg(65);" class="post_face15">表情65</a>
<a href="javascript:editor_createImg(66);" class="post_face16">表情66</a>
<a href="javascript:editor_createImg(67);" class="post_face17">表情67</a>
<a href="javascript:editor_createImg(68);" class="post_face18">表情68</a>
</li>
<li>
<a href="javascript:editor_createImg(69);" class="post_face19">表情69</a>
<a href="javascript:editor_createImg(70);" class="post_face20">表情70</a>
<a href="javascript:editor_createImg(71);" class="post_face21">表情71</a>
<a href="javascript:editor_createImg(72);" class="post_face22">表情72</a>
<a href="javascript:editor_createImg(73);" class="post_face23">表情73</a>
<a href="javascript:editor_createImg(74);" class="post_face24">表情74</a>
</li>
<li>
<a href="javascript:editor_createImg(75);" class="post_face25">表情75</a>
<a href="javascript:editor_createImg(76);" class="post_face26">表情76</a>
<a href="javascript:editor_createImg(77);" class="post_face27">表情77</a>
<a href="javascript:editor_createImg(78);" class="post_face28">表情78</a>
<a href="javascript:editor_createImg(79);" class="post_face29">表情79</a>
<a href="javascript:editor_createImg(80);" class="post_face30">表情80</a>
</li>
<li>
<a href="javascript:editor_createImg(81);" class="post_face31">表情81</a>
<a href="javascript:editor_createImg(82);" class="post_face32">表情82</a>
<a href="javascript:editor_createImg(83);" class="post_face33">表情83</a>
<a href="javascript:editor_createImg(84);" class="post_face34">表情84</a>
<a href="javascript:editor_createImg(85);" class="post_face35">表情85</a>
<a href="javascript:editor_createImg(86);" class="post_face36">表情86</a>
</li>
</ul>
</div>
</div>
<input name="Button1" type="button" id="Comments_Button1" οnclick="saveComments();" value="发表评
论" />
</div>
</form>好了以上就是我所实现的一个过程，需望对大家会有所帮助
5403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
