使用ajax和jsp和jdbc技术写一个留言评论页面,不需要账号也能评论
时间: 2023-05-26 21:03:36 浏览: 103
首先,在JSP页面上,我们需要布局页面并定义表单元素。假设我们需要用户输入姓名和评论内容,我们会创建以下表单:
```html
<form id="commentForm" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment" required></textarea>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
```
在这个例子中,我们使用了一个form元素来包含我们的输入元素。使用method=”post”属性,表示我们会向服务器提交数据。
我们使用一个输入框和一个文本框,分别表示用户的姓名和评论内容。我们设置了required属性来强制用户输入值,并添加了一个submit按钮来触发表单提交。
使用AJAX技术,我们可以停止表单提交,而是使用JavaScript代码来处理提交数据。代码如下:
```javascript
const form = document.getElementById("commentForm");
const button = form.getElementsByTagName("button")[0];
button.addEventListener("click", function(e) {
e.preventDefault();
const nameInput = form.getElementsByTagName("input")[0];
const commentInput = form.getElementsByTagName("textarea")[0];
const name = nameInput.value;
const comment = commentInput.value;
// TODO: send the data to the server using AJAX
});
```
我们首先获取表单元素和提交按钮,然后给提交按钮添加了一个事件监听器。我们使用event.preventDefault()来防止表单默认提交,然后获取输入值,以便稍后将其传递给服务器。
现在,我们需要定义一个函数来将数据发送到服务器,并将新评论显示在页面上。我们可以使用jQuery的$ .ajax()方法,如下所示:
```javascript
$.ajax({
url: "/comment",
type: "POST",
data: { name: name, comment: comment },
success: function(data) {
// Display the new comment
const commentList = document.getElementById("commentList");
const newComment = document.createElement("li");
newComment.innerHTML = "<strong>" + name + "</strong>: " + comment;
commentList.appendChild(newComment);
// Clear the input fields
nameInput.value = "";
commentInput.value = "";
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: " + textStatus + " - " + errorThrown);
}
});
```
在这个例子中,我们指定请求的URL(/comment),HTTP方法(POST),以及发送的数据。我们在成功回调函数中添加了一些代码来将新评论追加到页面上,并在输入区域上清除值。我们还添加了一个错误回调函数来处理与服务器通信时可能出现的错误。
最后我们需要使用JDBC技术在服务器端处理数据。我们可以使用Java Servlet来处理来自jQuery的请求:
```java
@WebServlet("/comment")
public class CommentServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Extract comment data from the request object
String name = request.getParameter("name");
String comment = request.getParameter("comment");
// Insert the comment into the database
insertComment(name, comment);
// Send a response back to the client
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("Success!");
}
private void insertComment(String name, String comment) {
Connection conn = null;
PreparedStatement stmt = null;
try {
// Connect to the database
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb?useSSL=false", "root", "password");
// Insert the new comment into the database
stmt = conn.prepareStatement("INSERT INTO comments (name, comment) VALUES (?, ?)");
stmt.setString(1, name);
stmt.setString(2, comment);
stmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
// Close the statement and the connection
if (stmt != null) {
stmt.close();
}
if (conn != null) {
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
```
在这个例子中,我们提取了评论数据,然后将它们插入到MySQL中。我们使用JDBC API连接到数据库,然后在SQL语句中使用占位符来安全地插入值。
我们在返回响应之前可以发送简单的消息,以便jQuery可以在提交之后了解结果。如果有错误,它可能会在jQuery的错误回调函数中显示。
现在我们已经实现了一个完整的留言评论系统。用户可以输入他们的名字和评论内容,然后单击提交按钮。通过使用AJAX和JDBC技术,我们可以将新评论添加到数据库中,然后立即将其显示在页面上,而无需刷新整个页面。