廢了一天的功夫,終於把我的留言功能實現了.有時候一個糾結的問題,會耽誤自己很長時間,如何提高開發效率,是個很大的問題!
總結一下今天的內容:
我要實現的功能是,在一篇文章的最后,添加一個留言板塊,在留言之後能夠直接顯示在頁面上
第一步:在struts2基本jar包的基礎上添加struts2-jsonplugin
第二步:在stuts.xml文件中將extends由默認的struts-default改為json-default
<package name="tutorial" extends="json-default">
第三步:在jsp中引入jquery
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
第四步:畫頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://"
request.getServerName() ":" request.getServerPort()
path "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>新聞公告</title>
<link href="css/register.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
$("#mes_button").bind("click",function(event){
var m_name = $("#m_name").val();
var m_content = $("#m_content").val();
var b_id = $("#b_id").val();
$.ajax({
type: "POST",
url: "addMessage.action",
data:{"m_name":m_name,"m_content":m_content,"b_id":b_id} ,
success: function (data) {
$("#message_list").append("<div class='message_box' id=''><div class='message_text'><strong>"
data.m_name "</strong><p>" data.m_content "</p></div></div>");
}
});
});
});
</script>
</head>
<body>
<div id="main">
<div id="head">
<div class="head_bg">
<div class="head_menu">
<ul>
<div class="head_left">
<a href="cnblogs.com/index.jsp">首頁</a>
</div>
<div class="head_right">
<a href="jsp/news/news.jsp">新聞公告</a>
</div>
<div class="head_right">
<a href="jsp/news/news.jsp">專業動態</a>
</div>
<div class="head_right">
<a href="">文章列表</a>
</div>
<div class="head_right">
<a href="jsp/news/news.jsp">成果展示</a>
</div>
<div class="head_right">
<a href="">下載中心</a>
</div>
<div class="head_right">
<a href="">管理員入口</a>
</div>
</ul>
</div>
</div>
</div>
<div class="underhead">
<span class="l"> 正文 </span>
</div>
<div align="left" style="width: 100%">
<div class="news">
<div class="newscontent">
<h1>
<a id="tit" class="tit" href="" target="_blank" mon="a=7">${ins.b_title }</a>
</h1>
<div class="overcontent">
時間:${ins.b_date }
</div>
<div id="content">
${ins.b_content}
</div>
<div id="undercontent">
<input id="b_id" type="hidden" name="b_id" value="8">
</div>
</div>
</div>
<div id="message_list">
</div>
<div class="message">
<div class="message_title">
發表評論
</div>
<div class="message_user">
用戶名:
<input disabled="disabled" id="m_name"
type="text" value="houjinxin" name="m_name"/>
</div>
<form action="">
<div class="message_content">
<textarea id="m_content" rows="5" cols="80" name="m_content"></textarea>
</div>
<div class="message_button">
<input id="mes_button" type="button" value="提交評論" />
</div>
</form>
</div>
</div>
</div>
<div>
<br/>
</div>
<div id="foot">
Copyright (c) 2012 Inc All rights reserved 版權所有 by
黑龍江科技學院
<select>
<option value="" selected>
----------友情鏈接----------
</option>
<option value=moe.edu.cn />
國家教育部
</option>
<option value=pgzx.edu.cn />
教育教學評估中心
</option>
<option value=hlje.net />
省教育廳
</option>
<option value=chinasafety.gov.cn/index.htm>
國家安全生產監督管理總局
</option>
<option value=.hljmj.gov.cn />
省煤礦安全監察局
</option>
<option value=.chinacoal.org.cn />
中國煤炭工業網
</option>
<option value=.triz.gov.cn />
技術創新方法
</option>
<option value=.cumt.edu.cn />
中國礦業大學
</option>
<option value=triz.gov.cn />
中國礦業大學北京校區
</option>
</select>
</div>
<br />
<br />
</body>
</html>
第四步:寫業務代碼
public void addMessage(int b_id,String m_content,String m_name)
{
PreparedStatement ps = null;
try
{
String sql = "insert into message(b_id,m_name,m_content,m_date,m_status) values(?,?,?,?,?)";
ps = DBUtils.getConnection().prepareStatement(sql);
ps.setInt(1,b_id);
ps.setString(2,m_content);
ps.setString(3,m_name );
ps.setDate(4, new Date(new java.util.Date().getTime()));
ps.setString(5, "1");
ps.executeUpdate();
}
catch (Exception e)
{
e.printStackTrace();
}
finally
{
DBUtils.close(ps);
DBUtils.close();
}
}
第五步:在action調用該方法:目的是將留言錄入資料庫
package com.ele.web.action.message;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.sql.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.ele.services.MessageServices;
import com.ele.services.NewsServices;
import com.ele.vo.Ele_messageVO;
import com.ele.vo.Ele_newsVO;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class AddMessageAction extends ActionSupport
{
private String m_name;
private String m_content;
private int b_id;
public int getB_id()
{
return b_id;
}
public void setB_id(int bId)
{
b_id = bId;
}
public String getM_name()
{
return m_name;
}
public void setM_name(String mName)
{
m_name = mName;
}
public String getM_content()
{
return m_content;
}
public void setM_content(String mContent)
{
m_content = mContent;
}
@Override
public String execute()
{
MessageServices msgServices = new MessageServices();
msgServices.addMessage(b_id, m_content, m_name);
return SUCCESS;
}
}
到目前為止,在點擊提交按鈕后,數據會被顯示到頁面上,但是刷新之後就沒有了.這也是我將要完成的部分.
我設想的解決方法是在查詢文章的時候,將留言一併查出,不知道還會遇到什麼問題.
在今天的工作過程中,最讓我糾結的問題就是,利用ajax非同步傳值和響應數據處理這部分.
試了無數種方法都無果.最后還是在別人的幫助下完成的.留下此文,記錄學習過程.