Ajax实战用户管理系统-完成删除用户

简介: Ajax实战用户管理系统-完成删除用户
+关注继续查看

通过 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);
        }
        //删除用户
        function deleteUser(userid){
            $("#"+userid).closest("tr").remove();
            $.get("user.do",{userid:userid},function(result){
                alert(result);
            })
        }
    </script>

在 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();
    }
 
    //处理删除用户请求
    private void deleteUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>) servletContext.getAttribute("list");
        String userid = req.getParameter("userid");
        User user = null;
        for(User temp:list){
            if((temp.getUserid()+"").equals(userid)){
                user = temp;
                break;
            }
        }
        if(user != null){
            list.remove(user);
        }
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("删除成功");
        pw.flush();
        pw.close();
    }
}

3 运行效果

image

image

目录
相关文章
|
2月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
447 0
|
3月前
|
前端开发
Ajax实战用户管理系统-完成更新用户
Ajax实战用户管理系统-完成更新用户
18 0
|
3月前
|
前端开发
Ajax实战用户管理系统-完成添加用户
Ajax实战用户管理系统-完成添加用户
30 0
|
3月前
|
前端开发
Ajax实战用户管理系统-完成数据初始化
Ajax实战用户管理系统-完成数据初始化
26 0
|
3月前
|
前端开发
Ajax实战用户管理系统-搭建环境
Ajax实战用户管理系统-搭建环境
21 0
|
4月前
|
数据采集 前端开发 JavaScript
Python爬虫实战:抽象包含Ajax动态内容的网页数据
Python爬虫实战:抽象包含Ajax动态内容的网页数据
|
5月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
217 0
|
5月前
|
前端开发
ajax实战案例:$.when .done .fail实现多接口数据回调
ajax实战案例:$.when .done .fail实现多接口数据回调
24 0
|
5月前
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
40 0
|
5月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
50 0
相关产品
云迁移中心
推荐文章
更多