Ajax-Servlet第三课 员工管理系统-修改员工信息
Posted 笔触狂放
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax-Servlet第三课 员工管理系统-修改员工信息相关的知识，希望对你有一定的参考价值。
概念
本文在上一篇博客文章基础上，完成修改员工信息功能。
功能实现
通过点击任何一个员工信息上的修改按钮触发点击事件，将该员工的员工编号发送给服务器上
<td><input class=\\"update\\" type=\\"button\\" onclick='update("+json[i].id+")' value=\\"修改\\"> \\n" +//当任何一个修改按钮被点击，就会触发该方法事件
//获得该修改按钮对应的员工编号
function update(id)
//将该员工的员工编号发送给服务器
//要求服务器根据员工编号查询该员工的信息，并显示在修改页面上
location.href="SearchServlet?id="+id;
在控制器中接收该请求:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
//接收页面发送过来的员工编号
int id=Integer.parseInt(request.getParameter("id"));
//将员工编号存储至session中
request.getSession().setAttribute("id",id);
//跳转至修改页面
response.sendRedirect("update.html");
进入修改页面后，当页面加载完毕，自动触发ajax请求给服务器，要求服务器获得
1.数据库中所有部门名称供用户选择
2.查询出要修改的员工信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理系统-修改员工信息</title>
<style>
table
background-color: darkcyan;
width: 300px;
height: 200px;
color: white;
font-weight: bold;
text-align: center;
border-width: 0px;
border-radius: 7px;
#sub
width: 100px;
padding: 5px 10px;
border-width: 0px;
border-radius: 5px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
#sub:hover
background-color: red;
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function ()
//监听当前页面是否完全显示在浏览器上，如果加载完成
//自动触发给事件，发出ajax请求，要求服务器返回数据库中现有的部门名称
// 以及要修改的员工信息
$.ajax(
url:"UpdateServlet",
type:"GET",
data:"",
success:function (json)
"work":["","",""],"infoById":"id":1,"name":"张三"
for (var i = 0; i <json.work.length ; i++)
$("#dl").append("<option>"+json.work[i]+"</option>");
$("input[name='name']").val(json.infoById.name);
$("input[name='age']").val(json.infoById.age);
$("input[name='openDate']").val(json.infoById.openDate);
$("input[name='workClass']").val(json.infoById.workClass);
//判断当前员工的性别是男还是女,如果是男，那么将第一个单选按钮选中，否则选中第二个
if (json.infoById.sex=="男")
$("input[value='男']").attr("checked",true);
else
$("input[value='女']").attr("checked",true);
,
error:function ()
alert("连接服务器失败");
,
dataType:"json"
);
);
</script>
</head>
<body>
<div align="center">
<form action="UpdateServlet" method="post">
<table>
<tr>
<th colspan="2">修改员工信息</th>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="name" placeholder="请输入新员工姓名"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="number" name="age" placeholder="请输入新员工年龄"></td>
</tr>
<tr>
<td>入职时间：</td>
<td><input type="text" name="openDate" placeholder="请输入入职时间"></td>
</tr>
<tr>
<td>部门名称：</td>
<!--允许选择现有的部门名称，也可以新增其他的部门名称-->
<td><input type="search" list="dl" name="workClass" placeholder="请输入部门名称">
<datalist id="dl">
</datalist>
</td>
</tr>
<tr>
<td colspan="2"><input id="sub" type="submit" value="更新"></td>
</tr>
</table>
</form>
</div>
</body>
</html>控制器收到请求后，执行任务:
package com.emp.controller;
import com.emp.service.EmpServiceImp;
import com.emp.service.IEmpService;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet(urlPatterns = "/UpdateServlet")
public class UpdateServlet extends HttpServlet
IEmpService service=new EmpServiceImp();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//1.获得数据库中现有的部门名称
List<String> work = service.getWork();
// 2.获得要修改的员工信息
int id= (int) request.getSession().getAttribute("id");
//将根据员工编号查询数据库获得该员工的完整信息，并将其封装成json格式，
//发回修改页面，显示出来，供用户进行修改
Map<String, Object> infoById = service.getInfoById(id);
//将两部分数据封装在Map集合中
Map<String,Object> map=new HashMap<>();
map.put("work",work);
map.put("infoById",infoById);
//"work":["","",""],"infoById":"id":1,"name":"张三"
new ObjectMapper().writeValue(response.getWriter(),map);
控制器将任务递交给业务逻辑层接口:
List<String> getWork();//根据员工编号查询员工的完整信息
Map<String,Object> getInfoById(int id);业务逻辑层实现类将任务递交给数据访问层执行:
@Override
public List<String> getWork()
return dao.getWork();
@Override
public Map<String, Object> getInfoById(int id)
return dao.getInfoById(id);
数据访问层接口接收任务要求:
List<String> getWork();//根据员工编号查询员工的完整信息
Map<String,Object> getInfoById(int id);并有实现类执行sql语句获得结果:
@Override
public List<String> getWork()
return DBUtil.jt.query("select distinct workClass from emp",
new MyRowMapper("workClass") );
@Override
public Map<String, Object> getInfoById(int id)
return DBUtil.jt.queryForMap("select * from emp where id=?",
new Object[]id);
将查询的结果最终返回给控制层，由控制层封装层json解析，发回html页面进行展示:
success:function (json)
"work":["","",""],"infoById":"id":1,"name":"张三"
for (var i = 0; i <json.work.length ; i++)
$("#dl").append("<option>"+json.work[i]+"</option>");
$("input[name='name']").val(json.infoById.name);
$("input[name='age']").val(json.infoById.age);
$("input[name='openDate']").val(json.infoById.openDate);
$("input[name='workClass']").val(json.infoById.workClass);
//判断当前员工的性别是男还是女,如果是男，那么将第一个单选按钮选中，否则选中第二个
if (json.infoById.sex=="男")
$("input[value='男']").attr("checked",true);
else
$("input[value='女']").attr("checked",true);
,其页面效果如下:
当用户修改员工信息之后，点击更新按钮实现表单提交数据给服务器：
@WebServlet(urlPatterns = "/UpdateServlet")
public class UpdateServlet extends HttpServlet
IEmpService service=new EmpServiceImp();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//接收修改页面发送过来的修改后的数据
Map<String, String[]> parameterMap = request.getParameterMap();
parameterMap.forEach((k,v)-> System.out.println(k+":"+v[0]));
//从session中获得该员工的员工编号作为条件
int id= (int) request.getSession().getAttribute("id");
int update = service.update(parameterMap, id);
if (update>0)
response.sendRedirect("workerList.html");
服务器将接收的数据递交给业务逻辑层处理:
//根据员工编号作为条件，将数据库中对应的员工信息进行更新
int update(Map<String,String[]> map,int id);@Override
public int update(Map<String, String[]> map, int id)
Map<String,Object> m=new HashMap<>();
for (Map.Entry<String,String[]> entry:map.entrySet())
m.put(entry.getKey(),entry.getValue()[0]);
m.put("id",id);
return dao.update(m);
并将处理后的数据递交给数据访问层执行:
int update(Map<String,Object> map); @Override
public int update(Map<String, Object> map)
return DBUtil.jt.update("update emp set name=?,sex=?,age=?,openDate=?,workClass=? " +
" where id=?",
new Object[]
map.get("name"),
map.get("sex"),
map.get("age"),
map.get("openDate"),
map.get("workClass"),
map.get("id"));
并将执行后的结果返回给控制层，控制层根据结果进行判断，修改成功后刷新列表页面，即读者可自行运行查看修改的结果。
总结
本文修改功能就结束到这里，希望读者能通过本文的学习对前后端交互能有更深的认识。
以上是关于Ajax-Servlet第三课 员工管理系统-修改员工信息的主要内容，如果未能解决你的问题，请参考以下文章