创建一个简单的javaweb项目能实现分页功能,在jsp页面中有一个表格显示studentID,sNum,name,gender,age,tel这六种数据,这六种数据是从我的student数据库中的students表获取的数据。需要使用Ajax发送查询、新增、修改、删除学生信息的请求并处理请求。需要配置web.xml文件。请展示我所描述的这个项目的每个文件的完整代码,先输出jsp文件
时间: 2024-02-13 22:05:26 浏览: 79
图书管理系统 大二上学期的期末大作业。感觉是一个不错的Javaweb的练手项目hh。
5星 · 资源好评率100%
好的,这里是实现分页功能的jsp文件代码,包括表格和Ajax请求的处理:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 页面加载时获取第一页数据
getPageData(1);
// 查询按钮点击事件
$("#btn-query").click(function() {
getPageData(1);
});
// 新增按钮点击事件
$("#btn-add").click(function() {
var sNum = $("#add-sNum").val();
var name = $("#add-name").val();
var gender = $("#add-gender").val();
var age = $("#add-age").val();
var tel = $("#add-tel").val();
$.post("addStudentServlet", {
sNum : sNum,
name : name,
gender : gender,
age : age,
tel : tel
}, function(data) {
if (data == "success") {
alert("添加成功");
getPageData(1);
} else {
alert("添加失败");
}
});
});
// 修改按钮点击事件
$("#btn-edit").click(function() {
var id = $("#edit-id").val();
var sNum = $("#edit-sNum").val();
var name = $("#edit-name").val();
var gender = $("#edit-gender").val();
var age = $("#edit-age").val();
var tel = $("#edit-tel").val();
$.post("updateStudentServlet", {
id : id,
sNum : sNum,
name : name,
gender : gender,
age : age,
tel : tel
}, function(data) {
if (data == "success") {
alert("修改成功");
getPageData(1);
} else {
alert("修改失败");
}
});
});
// 删除按钮点击事件
$("#btn-delete").click(function() {
var id = $("#delete-id").val();
$.post("deleteStudentServlet", {
id : id
}, function(data) {
if (data == "success") {
alert("删除成功");
getPageData(1);
} else {
alert("删除失败");
}
});
});
});
// 获取指定页的数据
function getPageData(pageNum) {
var sNum = $("#query-sNum").val();
var name = $("#query-name").val();
var gender = $("#query-gender").val();
var ageMin = $("#query-age-min").val();
var ageMax = $("#query-age-max").val();
$.post("queryStudentServlet", {
sNum : sNum,
name : name,
gender : gender,
ageMin : ageMin,
ageMax : ageMax,
pageNum : pageNum
}, function(data) {
$("#table-data").html(data);
});
}
// 显示修改对话框
function showEditDialog(id, sNum, name, gender, age, tel) {
$("#edit-id").val(id);
$("#edit-sNum").val(sNum);
$("#edit-name").val(name);
$("#edit-gender").val(gender);
$("#edit-age").val(age);
$("#edit-tel").val(tel);
$("#edit-dialog").modal("show");
}
// 显示删除对话框
function showDeleteDialog(id) {
$("#delete-id").val(id);
$("#delete-dialog").modal("show");
}
</script>
</head>
<body>
<h1>学生管理系统</h1>
<form>
<div>
学号:<input type="text" id="query-sNum" />
姓名:<input type="text" id="query-name" />
性别:<select id="query-gender">
<option value="">全部</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
年龄:<input type="text" id="query-age-min" /> ~ <input
type="text" id="query-age-max" />
<button type="button" id="btn-query">查询</button>
</div>
</form>
<table border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-data">
</tbody>
</table>
<div id="page-nav">
</div>
<!-- 新增对话框 -->
<div id="add-dialog" style="display: none;">
<form>
<div>
学号:<input type="text" id="add-sNum" />
姓名:<input type="text" id="add-name" />
性别:<input type="text" id="add-gender" />
年龄:<input type="text" id="add-age" />
电话:<input type="text" id="add-tel" />
</div>
</form>
<button type="button" id="btn-add">添加</button>
</div>
<!-- 修改对话框 -->
<div id="edit-dialog" style="display: none;">
<form>
<div>
<input type="hidden" id="edit-id" />
学号:<input type="text" id="edit-sNum" />
姓名:<input type="text" id="edit-name" />
性别:<input type="text" id="edit-gender" />
年龄:<input type="text" id="edit-age" />
电话:<input type="text" id="edit-tel" />
</div>
</form>
<button type="button" id="btn-edit">修改</button>
</div>
<!-- 删除对话框 -->
<div id="delete-dialog" style="display: none;">
<form>
<div>
<input type="hidden" id="delete-id" />
确定要删除吗?
</div>
</form>
<button type="button" id="btn-delete">删除</button>
</div>
</body>
</html>
```
注:这里使用了 Bootstrap 框架,需要在项目中引入 Bootstrap 文件。
阅读全文