AJAX实战案例实现用户信息管理_ajax内容管理删除案例

作者：Gausst松鼠会 | 2024-02-17 06:20:18

踩

ajax内容管理删除案例

文章目录

一、Ajax 实战案例

一、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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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

3、添加用户操作

3.1、通过Ajax完成添加用户

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

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

        //获取页面初始化数据
        function getData() {
   
            $.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】