Ajax实战用户管理系统-完成更新用户

目录

1 通过 Ajax 完成预更新用户选择

2 通过 Ajax 完成更新用户

3 在 Servlet 中处理更新用户请求

4 运行效果

---

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>&nbsp;&nbsp;&nbsp;<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 通过 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>&nbsp;&nbsp;&nbsp;<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>

3 在 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;
    }

    //处理更新用户请求
    private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>) servletContext.getAttribute("list");
        User u = null;
        for(User temp : list){
            if(temp.getUserid() == user.getUserid()){
                u = temp;
                break;
            }
        }
        if(u != null){
            list.remove(u);
        }
        list.add(user);
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("更新成功");
        pw.flush();
        pw.close();
    }

}

4 运行效果