Java Web实战详细教程（十六）修改功能的实现（2）——展示修改页面

最新推荐文章于 2024-07-10 02:52:53 发布

Java朱老师

最新推荐文章于 2024-07-10 02:52:53 发布

阅读量4.1k

点赞数 1

分类专栏： Java Web 文章标签：前端 java javascript

本文链接：https://blog.csdn.net/GodBlessYouAndMe/article/details/121139425

版权

Java Web 专栏收录该内容

24 篇文章 82 订阅

订阅专栏

        修改功能，需要点击选中的元素，再点击修改按钮，跳转到修改页面，修改页面应该显示要修改的元素的所有数据，具体请看以下两张图，注意数字流程：
在这里插入图片描述


        思路是通过选中行的时候，取得第一个子元素的内容，即id（也可以使用data-id的形式获取，异曲同工）。修改上一篇文章的JS代码：

var selectedId = -1;//默认是-1，如果没选中，则为-1
	$("#data .stu").click(function() {
		$("#data .stu").removeClass("selected")
		$(this).addClass("selected");
		selectedId = $(this).children().eq(0).text();
	})

给修改按钮添加一个id：

<button type="button" class="btn btn-primary" id="showUpdate">修改</button>

当点击修改按钮时，先判断是否选中行，如果没有选中行，弹出警告框提示，否则向后台stu路径发送请求，携带type=showUpdate和id=具体值的参数。

$("#showUpdate").click(function() {
	if (selectedId > -1) {
		location.href = "stu?type=showUpdate&id="+selectedId;
	} else {
		alert("请选择一条数据");
	}
})

后台控制器StudentController.java的doGet方法中，追加一个else if：

 else if (type.equals("showUpdate")) {
			showUpdate(request, response);
		}

对应的showUpdate方法，通过request.getParameter(“id”)获得HTTP请求的参数，然后调用dao层的search(int id)方法，即从数据库中根据id查询出一个学生对象来。将该对象添加到request作用域中，转发到update.jsp页面。

public void showUpdate(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	int id = Integer.parseInt(request.getParameter("id"));

	StudentDao stuDao = new StudentDao();
	Student stu = stuDao.search(id);
	request.setAttribute("stu", stu);
	request.getRequestDispatcher("WEB-INF/update.jsp").forward(request, response);

}

StudentDao.java中需要定义一个search(int id)方法，这里使用了方法重载技术：

public Student search(int id) {
		Student stu = new Student();
		// jdbc 七个步骤
		// 1.将数据库jar包拷贝到lib文件夹下

		try {
			// 2.加载驱动
			Class.forName("com.mysql.jdbc.Driver");
			// 3.建立连接
			Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school_sk1", "root", "123456");
			// 4.建立SQL执行器
			Statement stat = conn.createStatement();
			// 5.执行sql语句
			ResultSet rs = stat.executeQuery("select * from student where id=" + id);
			// 6. 处理结果
			while (rs.next()) {
				stu.setId(rs.getInt("id"));
				stu.setName(rs.getString("name"));
				stu.setGender(rs.getString("gender"));
				stu.setAge(rs.getInt("age"));
			}
			// 7.关闭连接
			conn.close();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		return stu;
	}

update.jsp和add.jsp结构是一样的，不同的是为它的value设置上默认值：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@page import="entity.Student"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<style>
#main {
	width: 600px;
	margin: 10px auto;
}
</style>
</head>
<body>
	<%
		Student stu = (Student) request.getAttribute("stu");
	%>
	<div id="main">
		<form class="form-horizontal" action="stu">
			<input type="hidden" name="type" value="update" /> 

			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">名字</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入名字"
						name="name" value="<%=stu.getName()%>">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入性别"
						name="gender" value="<%=stu.getGender()%>">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">年龄</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入年龄"
						name="age" value="<%=stu.getAge()%>">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary">保存</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>

以上，完成了修改功能的第二步，即本篇文章图2的效果——展示修改页面。

Java朱老师

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
Java Web实战详细教程（十六）修改功能的实现（2）——展示修改页面

        修改功能，需要点击选中的元素，再点击修改按钮，跳转到修改页面，修改页面应该显示要修改的元素的所有数据，具体请看以下两张图，注意数字流程：                思路是通过选中行的时候，取得第一个子元素的内容，即id（也可以使用data-id
复制链接

扫一扫

专栏目录