0
点赞
收藏
分享

微信扫一扫

AJAX实战案例实现用户信息管理

狗啃月亮_Rachel 2022-02-25 阅读 37
ajaxjavascript前端

文章目录

一、Ajax 实战案例

需求:
创建 User 类，包含 uesrid、username、usersex、userbirth 属性。
在用户管理页面中通过 Ajax 技术完成对用户数据载入、添加用户、更新用户、删除用户操作。

1、搭建环境

1.1、创建User类

public class User {
    private int userid;
    private String username;
    private String usersex;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date userbirth;

    public int getUserid() {
        return userid;
    }

    public void setUserid(int userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUsersex() {
        return usersex;
    }

    public void setUsersex(String usersex) {
        this.usersex = usersex;
    }

    public Date getUserbirth() {
        return userbirth;
    }

    public void setUserbirth(Date userbirth) {
        this.userbirth = userbirth;
    }
}

1.2、在页面中创建表格

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <script src="js/jquery.js"></script>
    <script>

    </script>
</head>
<body>
<table align="center" width="60%" border="1">
    <tr>
        <td>ID：</td>
        <td><input type="text" name="userid" id="userid"/></td>
        <td>姓名：</td>
        <td><input type="text" name="username" id="username"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input type="text" name="usersex" id="usersex"/></td>
        <td>生日：</td>
        <td><input type="text" name="userbirth"
                   id="userbirth"/></td>
    </tr>
    <tr align="center">
        <td colspan="4">
            <input type="button" value="添加用户" id="add" />

            <input type="button" value="更新用户" id="update"/>
        </td>
    </tr>
</table>
<hr/>
<table align="center" width="60%" bgcolor="" border="1"
       id="myTable">
    <thead>
    <tr align="center">
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="tBody"></tbody>
</table>
</body>
</html>

1.3、运行效果：

在这里插入图片描述

2、加载用户数据

2.1、通过Ajax完成页面数据初始化

<script>
        //页面加载事件
        $(function () {
            //获取页面初始化数据
            getData();
        });

        //获取页面初始化数据
        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='#' οnclick='preUpdateUser()'>选择更新</a><a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
    </script>

2.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("Corey");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user1 = new User();
        user1.setUserid(2);
        user1.setUsername("Kang");
        user1.setUsersex("male");
        user1.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user1);
        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);
        }
    }

        //获取页面初始化数据
    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();
    }
}

运行结果：
在这里插入图片描述

3、添加用户操作

3.1、通过Ajax完成添加用户

<script>
        //页面加载事件
        $(function () {
            //获取页面初始化数据
            getData();

            //添加按钮绑定点击事件
            $("#add").click(function () {
                addOrUpdateUser("addUser");
            });
        });

        //获取页面初始化数据
        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='#' οnclick='preUpdateUser()'>选择更新</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' οnclick='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
            }
            location.reload();
            $.get("user.do",data,function (result) {
                    alert(result)
            });
        }

    </script>

3.2、在Servlet中处理添加用户请求

UserServlet.java:

//用户管理Servlet
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
        User user = new User();
        user.setUserid(1);
        user.setUsername("Corey");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user1 = new User();
        user1.setUserid(2);
        user1.setUsername("Kang");
        user1.setUsersex("male");
        user1.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user1);
        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);
        }
    }

        //获取页面初始化数据
    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")

运行结果：
在这里插入图片描述

4、更新用户操作

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

user.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <script src="js/jquery.js"></script>
    <script>
        //页面加载事件
        $(function () {
            //获取页面初始化数据
            getData();

            //添加按钮绑定点击事件
            $("#add").click(function () {
                addOrUpdateUser("addUser");
            });
        });

        //获取页面初始化数据
        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='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' οnclick='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>
</head>
<body>
<table align="center" width="60%" border="1">
    <tr>
        <td>ID：</td>
        <td><input type="text" name="userid" id="userid"/></td>
        <td>姓名：</td>
        <td><input type="text" name="username" id="username"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input type="text" name="usersex" id="usersex"/></td>
        <td>生日：</td>
        <td><input type="text" name="userbirth"
                   id="userbirth"/></td>
    </tr>
    <tr align="center">
        <td colspan="4">
            <input type="button" value="添加用户" id="add" />

            <input type="button" value="更新用户" id="update"/>
        </td>
    </tr>
</table>
<hr/>
<table align="center" width="60%" bgcolor="" border="1"
       id="myTable">
    <thead>
    <tr align="center">
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="tBody"></tbody>
</table>
</body>
</html>

4.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='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' οnclick='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>

4.3、在Servlet中处理更新用户请求

UserServlet.java:

//用户管理Servlet
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
        User user = new User();
        user.setUserid(1);
        user.setUsername("Corey");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user1 = new User();
        user1.setUserid(2);
        user1.setUsername("Kang");
        user1.setUsersex("male");
        user1.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user1);
        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);
        }
    }

        //获取页面初始化数据
    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();
    }
}

5、删除用户操作

5.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='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' οnclick='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>

5.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("Corey");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user1 = new User();
        user1.setUserid(2);
        user1.setUsername("Kang");
        user1.setUsersex("male");
        user1.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user1);
        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();
    }
}

案例结束!!!

举报

相关推荐

用户信息管理系统

javascriptjqueryhtml

学生信息管理案例

前端javascriptcss数组ci代码人生

vue实现用户信息收集本地sessionStorage存储案例

用户信息收集sessionStoragevuejson数组

【VUE项目实战】26、实现用户信息搜索功能

vue.jselementuiclearablev-model双向绑定HarmonyOS后端开发

Java案例实现用户登录

java开发语言后端

用户信息管理小项目

javascript前端elementui

电影信息管理系统案例

Systemi++javaJava后端开发

Django案例：学生信息管理

djangocsspythonpycharm

内置User 实现用户管理

django数据库表单Python后端开发

用户信息管理（web综合实践）

java前端后端
0 条评论