无刷新显示回帖

在留言板,论坛或贴吧等用户交流系统中,回帖是最常用的操作之一.传统的回帖操作会将用户编写的内容提交到服务器,返回一个提示信息,然后页面自动跳转回发帖主题.这个周期往往要让用户等待几秒到十几秒的时间,同时还要看着浏览器刷新1~2次.使用ajax修改后的回帖功能能不刷新页面

测试环境:eclipse3.2+jdk1.5+mysql

(希望朋友看代码时,能结合上一篇文件中的图示效果来看,就很好理解了)

用户操作界面文件index.jsp


<script type="text/javascript" src="bbs.js"></script>
<link href="bbs.css" type="text/css" rel="stylesheet">

<h1>无刷新显示回帖</h1>
<div id="statusDiv" style="display:none"></div>
<div id="thread">
<%
String sql = "select * from bbs_post where threadid = 1 order by id asc"; //定义查询数据库的SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
rs = pstmt.executeQuery(); //执行查询，返回结果集
while (rs.next()) {
%>
<div class="post" id="post<%=rs.getString("id")%>">
<div class="post_title"><%=rs.getString("title")%> [<%=rs.getString("username")%>]</div>
<div class="post_content"><pre><%=rs.getString("content")%></pre></div>
</div>
<%
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
%>
</div>

<table class="reply">
<tr>
<td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>标题：</td>
<td><input type="text" name="post_title" id="post_title"></td>
</tr>
<tr>
<td>内容：</td>
<td><textarea name="post_content" id="post_content"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="button" οnclick="submitPost()" value="提交"></td>
</tr>
</table>


服务器端响应文件bbs_post.jsp

<%
out.clear(); //清空当前的输出内容（空格和换行符）
request.setCharacterEncoding("UTF-8"); //设置请求字符集为UTF-8

String title = request.getParameter("title"); //获取title
String content = request.getParameter("content"); //获取content
String userName = request.getParameter("username"); //获取username
String threadId = request.getParameter("threadid"); //获取threadid

String sql = "insert into bbs_post(title,content,username,threadid) values (?,?,?,?)"; //定义查询数据库的SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
pstmt.setString(1, title); //设置title
pstmt.setString(2, content); //设置content
pstmt.setString(3, userName); //设置userName
pstmt.setString(4, threadId); //设置threadId
pstmt.executeUpdate(); //执行insert操作
pstmt.close();

//获取刚插入数据的新id
pstmt = conn.prepareStatement("select last_insert_id()");
rs = pstmt.executeQuery();
if (rs.next()) {
out.print(rs.getString(1)); //输出新id
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
%>



javascript文件bbs.js

var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
var username; //用于保存姓名
var title; //用于保存标题
var content; //用于保存内容
var threadid; //用于保存主题编号

//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}

//提交回帖到服务器
function submitPost() {
//获取帖子中姓名、标题、内容、主题编号四部分信息
username = document.getElementById("username").value;
title = document.getElementById("post_title").value;
content = document.getElementById("post_content").value;
threadid = document.getElementById("threadid").value;

if (checkForm()) {
displayStatus("正在提交……"); //显示提示信息

createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = submitPostCallBack; //设置回调函数
xmlHttp.open("POST", "bbs_post.jsp", true); //发送POST请求
//设置POST请求体类型
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("username=" + encodeURI(username) +
"&title=" + encodeURI(title) +
"&content=" + encodeURI(content) +
"&threadid=" + threadid); //发送包含四个参数的请求体
}
}

//检查表单是否内容已填写完毕
function checkForm() {
if (username == "") {
alert("请填写姓名");
return false;
} else if (title == "") {
alert("请填写标题");
return false;
} else if (content == "") {
alert("请填写内容");
return false;
}
return true;
}

//获取查询选项的回调函数
function submitPostCallBack() {
if (xmlHttp.readyState == 4) {
createNewPost(xmlHttp.responseText);
hiddenStatus();
}
}

//创建新的回帖
function createNewPost(postId) {
//清空当前表单中各部分信息
document.getElementById("post_title").value = "";
document.getElementById("post_content").value = "";
document.getElementById("username").value = "";

var postDiv = createDiv("post", ""); //创建回帖的外层div
postDiv.id = "post" + postId; //给新div赋id值

var postTitleDiv = createDiv("post_title", title + " [" + username + "]"); //创建标题div
var postContentDiv = createDiv("post_content", "<pre>" + content + "</pre>"); //创建内容div
postDiv.appendChild(postTitleDiv); //在外层div追加标题
postDiv.appendChild(postContentDiv); //在外层div追加内容

document.getElementById("thread").appendChild(postDiv); //将外层div追加到主题div中
}

//根据className和text创建新的div
function createDiv(className, text) {
var newDiv = document.createElement("div");
newDiv.className = className;
newDiv.innerHTML = text;
return newDiv;
}

//显示提示信息div
function displayStatus(info) {
var statusDiv = document.getElementById("statusDiv");
statusDiv.innerHTML = info;
statusDiv.style.display = "";
}

//隐藏提示信息div
function hiddenStatus() {
var statusDiv = document.getElementById("statusDiv");
statusDiv.innerHTML = "";
statusDiv.style.display = "none";
}



样式表文件bbs.css




body, td, input, textarea {
font-family:Arial;
font-size:12px;
}


#thread {
border:1px solid black;
width:300px;
margin-bottom:10px;
}


#statusDiv {
border:1px solid #999;
background:#FFFFCC;
width:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -100px;
width:280px;
}


div.post {
border-bottom:1px solid black;
padding:5px;
}


div.post_title {
border-bottom:1px dotted #0066CC;
font-weight:bold;
}


div.post_content {
font-size:12px;
margin:5px;
}


table.reply {
border-collapse:collapse;
width:300px;
}


table.reply td {
border:1px solid black;
padding:3px;
}


table.reply td.title {
background:#003366;
color:#FFFFFF;
}


input, textarea {
border:1px solid black;
}


textarea {
width:200px;
height:50px;
}


pre {
margin:0;
}