JavaWeb JSP页面实现用户名字输入后显示所有用户名字和用户数量完整代码示例
以下是一个在JSP页面中使用JavaWeb实现用户名字输入后显示所有用户名字和用户数量的完整代码示例：
index.jsp文件：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>记录用户名字和数量</title>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
$(document).ready(function () {
$('#submitForm').on('click', function (e) {
e.preventDefault();
var username = $('#username').val();
var quantity = $('#quantity').val();
$.ajax({
type: 'POST',
url: 'RecordUsernameServlet',
data: {
username: username,
quantity: quantity
},
success: function () {
getAllRecords();
},
error: function () {
alert('发生错误，请重试！');
}
});
});
function getAllRecords() {
$.ajax({
type: 'GET',
url: 'GetAllRecordsServlet',
success: function (data) {
var tableBody = $('#recordsTable tbody');
tableBody.empty();
$.each(data, function (index, record) {
var row = $('<tr>');
row.append($('<td>').text(record.username));
row.append($('<td>').text(record.quantity));
tableBody.append(row);
});
},
error: function () {
alert('发生错误，请重试！');
}
});
}
getAllRecords();
});
</script>
</head>
<body>
<h1>记录用户名字和数量</h1>
<form id='recordForm'>
<label for='username'>用户名字:</label>
<input type='text' id='username' name='username' required>
<br><br>
<label for='quantity'>数量:</label>
<input type='number' id='quantity' name='quantity' required>
<br><br>
<input type='submit' id='submitForm' value='提交'>
</form>
<br>
<h2>所有记录</h2>
<table id='recordsTable' border='1'>
<thead>
<tr>
<th>用户名字</th>
<th>数量</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
RecordUsernameServlet.java文件：
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class RecordUsernameServlet extends HttpServlet {
private static final String DB_URL = 'jdbc:mysql://localhost:3306/mydatabase';
private static final String DB_USER = 'username';
private static final String DB_PASSWORD = 'password';
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter('username');
String quantityStr = request.getParameter('quantity');
int quantity = Integer.parseInt(quantityStr);
// 在这里，您可以将用户名字和数量记录到数据库或日志文件中
Connection connection = null;
PreparedStatement statement = null;
try {
connection = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
String sql = 'INSERT INTO records (username, quantity) VALUES (?, ?)';
statement = connection.prepareStatement(sql);
statement.setString(1, username);
statement.setInt(2, quantity);
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (statement != null) {
statement.close();
}
if (connection != null) {
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
GetAllRecordsServlet.java文件：
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class GetAllRecordsServlet extends HttpServlet {
private static final String DB_URL = 'jdbc:mysql://localhost:3306/mydatabase';
private static final String DB_USER = 'username';
private static final String DB_PASSWORD = 'password';
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Record> records = new ArrayList<>();
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;
try {
connection = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
statement = connection.createStatement();
String sql = 'SELECT * FROM records';
resultSet = statement.executeQuery(sql);
while (resultSet.next()) {
String username = resultSet.getString('username');
int quantity = resultSet.getInt('quantity');
Record record = new Record(username, quantity);
records.add(record);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (resultSet != null) {
resultSet.close();
}
if (statement != null) {
statement.close();
}
if (connection != null) {
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// 将记录转换为JSON字符串并发送回客户端
ObjectMapper mapper = new ObjectMapper();
response.setContentType('application/json');
response.setCharacterEncoding('UTF-8');
response.getWriter().write(mapper.writeValueAsString(records));
}
}
Record.java文件：
public class Record {
private String username;
private int quantity;
public Record(String username, int quantity) {
this.username = username;
this.quantity = quantity;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
}
在上述代码中，我们通过在index.jsp页面中使用jQuery和AJAX来处理表单提交和获取记录的操作。当用户点击提交按钮时，我们使用AJAX将用户名字和数量发送到RecordUsernameServlet进行记录。成功记录后，我们再次使用AJAX调用GetAllRecordsServlet来获取所有记录，并将其显示在表格中。
RecordUsernameServlet与之前的示例代码相同，负责将用户名字和数量记录到数据库中。
GetAllRecordsServlet用于获取所有记录，并将它们转换为JSON字符串返回给客户端。
Record类用于表示记录的对象。
请确保将这些文件放置在正确的JavaWeb项目目录中，并配置servlet的映射和依赖项。
希望这个完整代码示例可以帮助您在JSP页面中实现用户名字输入后显示所有用户名字和用户数量的功能！如果您还有其他问题，请随时提问。
原文地址: https://www.cveoy.top/t/topic/cZzt 著作权归作者所有。请勿转载和采集!