用 DWR 实现 POST 方法提交 --CTO

近来在实现在做网站的过程当中有一个功能，就是用户需要对网页展示产品进行评论，本来是想用表单来直接

提交，但是想想用表单提交后还需要再返回到产品页面，页面需要进行一次刷新，而且页面展示的数据量太大

，所以就考滤用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" onclick="saveComments();" value="发表评

论" />
</div>
</form>

 好了以上就是我所实现的一个过程，需望对大家会有所帮助