Ajax实战用户管理系统-完成添加用户

简介: Ajax实战用户管理系统-完成添加用户

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 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 运行效果

目录
相关文章
|
6月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
50 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
149 0
|
14天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
30 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
55 10
React技术栈-react使用的Ajax请求库实战案例
|
4月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
61 7
|
5月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
6月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
45 1
|
6月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
79 1
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
68 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
68 0