1 通过 Ajax 完成添加用户
<script> $(function () { //获取页面初始化数据 getData(); //添加按钮绑定点击事件 $("#add").click(function(){ addOrUpdateUser("addUser"); }); //更新按钮绑定点击事件 $("#update").click(function(){ addOrUpdateUser("updateUser"); }); }); //获取页面初始化数据 function getData(){ $.getJSON("user.do",{flag:"getData"},function (result) { init(result); }); } //遍历数据生成数据 function init(obj){ var str =""; $.each(obj,function(){ str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' onclick='preUpdateUser("+this.userid+")'>选择更新</a> <a href='#' onclick='deleteUser("+this.userid+")'>删除</a></td></tr>" }); $("#tBody").prepend(str); } //用户添加或者用户更新 function addOrUpdateUser(flag){ //从页面中获取数据 var userid = $("#userid").val(); var username = $("#username").val(); var usersex = $("#usersex").val(); var userbirth = $("#userbirth").val(); var data = { userid:userid, username:username, usersex:usersex, userbirth:userbirth, flag:flag } $.get("user.do",data,function(result){ alert(result); }); location.reload(); } //更新之前的数据选择 function preUpdateUser(userid){ var arr = new Array(); $("#"+userid).closest("tr").children().each(function(index,ele){ if(index <=3){ arr[index]= ele.innerText } }); $("#userid").val(arr[0]); $("#username").val(arr[1]); $("#usersex").val(arr[2]); $("#userbirth").val(arr[3]); $("#userid").attr("readonly",true); } } </script>
2 在 Servlet 中处理添加用户请求
/** * 用户管理Servlet */ @WebServlet("/user.do") public class UserServlet extends HttpServlet { //生成模拟数据初始化 @Override public void init() throws ServletException { User user = new User(); user.setUserid(1); user.setUsername("Oldlu"); user.setUsersex("male"); user.setUserbirth(new Date()); User user2 = new User(); user2.setUserid(2); user2.setUsername("Kevin"); user2.setUsersex("male"); user2.setUserbirth(new Date()); List<User> list = new ArrayList<>(); list.add(user); list.add(user2); ServletContext servletContext = this.getServletContext(); servletContext.setAttribute("list",list); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String flag = req.getParameter("flag"); if("getData".equals(flag)){ this.getData(req,resp); }else if("addUser".equals(flag)){ this.addUser(req,resp); }else if("updateUser".equals(flag)){ this.updateUser(req,resp); }else{ this.deleteUser(req,resp); } } //获取页面初始化数据 private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { List<User> list = (List<User>) this.getServletContext().getAttribute("list"); String s = JsonUtils.objectToJson(list); resp.setContentType("application/json"); PrintWriter pw = resp.getWriter(); pw.print(s); pw.flush(); pw.close(); } //处理添加用户请求 private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { User user = this.createUser(req); ServletContext servletContext = this.getServletContext(); List<User> list = (List<User>) servletContext.getAttribute("list"); list.add(user); resp.setContentType("text/plain;charset=utf-8"); PrintWriter pw = resp.getWriter(); pw.print("添加成功"); pw.flush(); pw.close(); } //获取请求数据 private User createUser(HttpServletRequest req){ String userid = req.getParameter("userid"); String username = req.getParameter("username"); String usersex = req.getParameter("usersex"); String userbirth = req.getParameter("userbirth"); User user = new User(); user.setUserid(Integer.parseInt(userid)); user.setUsername(username); user.setUsersex(usersex); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); try { Date parse = sdf.parse(userbirth); user.setUserbirth(parse); } catch (ParseException e) { e.printStackTrace(); } return user; } }
解决时区问题
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
3 运行效果