使用ajax和jsp以及jdbc技术写一个评论页面
时间: 2023-05-26 10:03:34 浏览: 103
一个使用Ajax+jsp制作的留言板源码
5星 · 资源好评率100%
注:此处使用的是MySQL数据库,JDBC连接时需要导入MySQL驱动。
1. 创建数据库和表
在MySQL中创建一个名为test的数据库,然后在该数据库中创建一个名为comments的表,如下:
```sql
CREATE DATABASE test;
USE test;
CREATE TABLE comments (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
commentText TEXT NOT NULL,
createTime DATETIME NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```
2. 编写前端页面
在webapp目录下,创建comment.jsp页面,如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论列表</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").click(function () {
if ($("#name").val() == "") {
alert("请填写姓名!");
return false;
}
if ($("#commentText").val() == "") {
alert("请填写评论!");
return false;
}
$.ajax({
type: "POST",
url: "commentHandler.jsp",
data: {
"name": $("#name").val(),
"commentText": $("#commentText").val()
},
success: function (data) {
$("#name").val("");
$("#commentText").val("");
$("#commentList").prepend(data);
}
});
});
});
</script>
</head>
<body>
<h2>添加评论</h2>
<form id="commentForm">
<label for="name">姓名:</label>
<input type="text" name="name" id="name"><br>
<label for="commentText">评论:</label>
<textarea name="commentText" id="commentText" rows="5"></textarea><br>
<input type="button" value="提交" id="submit">
</form>
<h2>评论列表</h2>
<div id="commentList">
<%
// import java.sql.DriverManager;
// import java.sql.Connection;
// import java.sql.PreparedStatement;
// import java.sql.ResultSet;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false";
String dbUsername = "root";
String dbPassword = "password";
Connection connection = DriverManager.getConnection(url, dbUsername, dbPassword);
PreparedStatement statement = connection.prepareStatement("SELECT * FROM comments ORDER BY createTime DESC;");
ResultSet resultSet = statement.executeQuery();
while (resultSet.next()) { %>
<div>
<strong><%= resultSet.getString("name") %></strong>
<span><%= resultSet.getString("createTime") %></span>
<p><%= resultSet.getString("commentText") %></p>
</div>
<% }
resultSet.close();
statement.close();
connection.close();
%>
</div>
</body>
</html>
```
该页面包含一个表单,用于输入姓名和评论,以及一个评论列表,用于展示所有的评论。注意:在该页面中,我们并没有直接在`comment.jsp`中使用JDBC连接数据库,而是将其放到了`commentHandler.jsp`中,这样做可以避免在JSP页面中直接调用JDBC API而导致的复杂性和不安全性问题。
3. 编写commentHandler.jsp页面
在webapp目录下,创建commentHandler.jsp页面,用于处理表单提交的数据,如下:
```jsp
<%
// import java.sql.DriverManager;
// import java.sql.Connection;
// import java.sql.PreparedStatement;
// import java.time.LocalDateTime;
// import java.time.format.DateTimeFormatter;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false";
String dbUsername = "root";
String dbPassword = "password";
Connection connection = DriverManager.getConnection(url, dbUsername, dbPassword);
PreparedStatement statement = connection.prepareStatement("INSERT INTO comments (name, commentText, createTime) VALUES (?, ?, ?);");
statement.setString(1, request.getParameter("name"));
statement.setString(2, request.getParameter("commentText"));
LocalDateTime now = LocalDateTime.now();
DateTimeFormatter format = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
statement.setString(3, now.format(format));
statement.executeUpdate();
ResultSet resultSet = statement.getGeneratedKeys();
int id;
if (resultSet.next()) {
id = resultSet.getInt(1);
} else {
throw new IllegalStateException("Could not retrieve ID after insert");
}
statement.close();
connection.close();
%>
<div>
<strong><%= request.getParameter("name") %></strong>
<span><%= now.format(format) %></span>
<p><%= request.getParameter("commentText") %></p>
</div>
```
在该页面中,我们使用了JDBC连接MySQL数据库,并插入了新的评论。由于数据库中还包含了一些其他的字段,如id和createTime,因此这里我们通过JDBC API设置值并插入到数据库中。此外,我们还在该页面中返回了一个HTML片段,该片段用于在前端页面中动态添加新的评论。
4. 启动Tomcat服务器
使用$CATALINA_HOME/bin/startup.sh或startup.bat启动Tomcat服务器,并访问http://localhost:8080/comment.jsp,即可看到评论页面的效果。在该页面中,我们可以输入任意的姓名和评论内容,然后提交后就能够将其添加到数据库中并立即展示在评论列表中。
阅读全文