jquery与ajax实现增删改查

向右看齐 2022-09-11 08:24 311阅读 0赞

jquery与ajax实现增删改查

对于本项目，jquery与ajax实现当前页面的增删改查

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台

准备操作：

1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。

2.连接云服务器数据库

新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名和用户密码，该用户名和用户密码要与jar包中对数据库的配置的用户名和密码一样，然后对这个用户进行一些分配权限的配置。

3.可以编写前端简单的前端页面

比如登录页面和用户信息的页面

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>行学天下</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="../../jquery-3.1.1.js"></script>
    
    </head>
    
    <body>
        <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping">用户名</span>
            </div>
            <input id="username" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
        <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping">输入框</span>
            </div>
            <input id="password" type="password" class="form-control" placeholder="password" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
        <button type="button" class="btn btn-lg btn-primary">登录</button>
    
    </body>
    <script>
        function login() { 
            // console.log("sss");
            var obj = { 
                    username: $("#username").val(),
                    password: $("#password").val()
                }
                // console.log(obj);
            $.ajax({ 
                url: "http://ip:端口号/user/login",
                method: "post",
                contentType: "application/json",
    
                data: JSON.stringify(obj),
                success: function(res) { 
                    // console.log(res);
                    sessionStorage.setItem("token", res.data.token)
                    $(location).attr("href", "./index.html");
                    // // 获取用户信息
                    // $.ajax({ 
                    // url: "http://ip:端口号/user/info?token=" +sessionStorage.getItem("token"),
                    // contentType: "application/json",
                    // headers: { 
                    // " Authorization": Authorization
                    // },
                    // success: function(res) { 
                    // console.log(res);
                    // }
                    // })
                }
    
            });
        }
        $("button").click(login);
    </script>
    
    </html>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]

然后可以对首页进行编写

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>行学天下-首页</title>
        <script src="./js/jquery.js"></script>
        <style>
            * { 
                margin: 0px;
                padding: 0px;
            }
            
            html,
            body,
            .main { 
                width: 100%;
                height: 100%;
            }
            
            .top { 
                width: 100%;
                background-color: rgb(229, 245, 220);
                color: grey;
                font-size: 30px;
                height: 70px;
                line-height: 70px;
                box-sizing: border-box;
            }
            
            .user { 
                float: right;
            }
            
            .bottom { 
                width: 100%;
                height: calc(100% - 70px);
            }
            
            .bottom-left { 
                width: 170px;
                background-color: rgb(204, 204, 59);
                height: 100%;
                float: left;
            }
            
            .bottom-left li { 
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: #629739;
                color: white;
                font-size: 18px;
                cursor: pointer;
                border-bottom: 1px solid rgb(241, 234, 234);
            }
            
            .bottom-left li:hover { 
                background-color: #629586;
            }
            
            .bottom-right { 
                width: calc(100% - 170px);
                float: left;
                background-color: rgb(248, 185, 103);
                height: 100%;
            }
            
            .content { 
                width: 98%;
                height: 98%;
                background-color: white;
                margin-left: 1%;
                margin-top: 1%;
                border-radius: 5px;
                padding: 1%;
            }
        </style>
    </head>
    
    <body>
        <div class="main">
            <div class="top">
                <span>行学天下后台管理系统</span>
                <div class="user">
                    欢迎xxx
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-left">
                    <ul>
                        <li>用户管理</li>
                        <li>栏目管理</li>
                        <li>项目管理</li>
                    </ul>
                </div>
                <div class="bottom-right">
                    <div class="content">
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    <script>
        $(function() { 
            $(".bottom-left li:first").trigger('click');
            $(".bottom-left ul").on({ 
                click: function() { 
                    // console.log($(this).text());
                    if ($(this).text() === '栏目管理') { 
                        $(".content").load('./column.html');
                    } else if ($(this).text() === "用户管理") { 
                        $(".content").load('./user.html')
                    } else if ($(this).text() === '项目管理') { 
                        $(".content").load('./project.html')
                    }
                }
            }, "li");
        })
    </script>
    
    </html>
    
    </html>

**首页效果图**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

当我们点击侧边栏时，侧边栏的内容能够在右侧的内容框中显示

点击用户管理，实现效果如下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

用户管理的静态页面代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用户管理</title>
        
        <script src="./js/jquery.js"></script>
        
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
    
        
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>
    </head>
    
    <body>
        <div class="header">用户管理</div>
        
        
        
        <button type="button" class="btn btn-primary" id="addUserBtn">新增
        <button type="button" class="btn btn-danger" id="delAllUser">
       批量删除
      </button>
        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>电话</th>
                    <th>真实姓名</th>
    
                </tr>
            </thead>
            <tbody>
    
    
            </tbody>
        </table>
    
    
    
        
        
        <div class="modal" id="myModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">新增用户</h5>
                        <button type="button" id="modalClose" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="form-horizontal">
                            <div class="form-group">
                                <label for="input1">
                                姓名
                                </label>
                                <input type="text" class="form-control" name="username">
                                <label for="input2">
                                    密码
                                </label>
                                <input type="password" class="form-control" name="password">
    
                                <label for="input1">
                                    电话号码
                                    </label>
                                <input type="text" class="form-control" name="telephone">
                                <label for="input2">
                                        真实姓名
                                    </label>
                                <input type="text" class="form-control" name="realname">
    
    
                                
    
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="saveModelCancel" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveModelConfirm">确定</button>
                    </div>
                </div>
            </div>
        </div>
    
    
    </body>
    </html>

**实现查找所有用户信息**

1.使用ajax实现向后台接口发送请求，请求成功后，会将返回过来的数据进行一个封装，可以在ajax中设置请求成功后的回调函数，在回调函数中，可以将每条数据存放在表格中，这时我们就可以新建tbody中的内容了，用来存放后台传过来的数据。

代码如下：

// 查询所有用户信息
        function loadAllUser() { 
            $("tbody").empty();
            $.ajax({ 
                url: baseURL + "/baseUser/findAll",
    
                headers: { 
                    "Authorization": sessionStorage.getItem('token')
                },
                success: function(res) { 
                    console.log(res);
                    res.data.forEach(function(item) { 
                        console.log(item);
                        var newTr = $(`<tr> <td> <input type="checkbox" value = ` + item.id + ` \/> </td> <td> ` + item.username + ` </td> <td> ` + item.password + ` </td> <td> ` + item.telephone + ` </td> <td> ` + item.realname + ` </td> <td class="opration"> <span class="edit">编辑</span> <span class="del">删除</span> </td> </tr>`)
                        $('tbody').append(newTr);
    
                    });
                }
            });
        }

**删除用户信息**

当用户点击删除时，首先会获得该行数据的id，将id传入后台，根据id去删除数据，获取完id后，使用ajax对后台接口进行操作。

ajax中一般包括url,headers,method(发送数据给后台时需要)，success(请求成功后的回调函数),error(求失败后的回调函数)，data(传入后台的数据)

我觉得比较困难的是如何去找到我们**所需要的节点**。

代码如下：

**添加用户信息**

当用户点击添加按钮时，会弹出一个模态框，点击取消时，模态框关闭，点击X时，模态框也关闭，当点击确定时，会首先获取模态框中管与输入框的内容（id的值数据自动插入的，不需要获取），然后将输入框中的内容封装到一个对象中，之后再使用ajax对后台接口进行请求，最后重新加载当前页面，并清空模态框中的内容。

// 点击X按钮关闭当前模态框
        $("#modalClose").click(function() { 
            clearInput();
            $("#myModal").hide();
        });
        // 点击取消按钮关闭当前模态框
        $("#saveModelCancel").click(function() { 
            clearInput();
            $("#myModal").hide();
        });
        // 点击模态框中确定按钮，向后台发送请求
        $("#saveModelConfirm").on({ 
            click: addUser
    
        });
    
        function addUser() { 
            // alert("hhh");
            // 获取输入框中的值
    
            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            var telephone = $("input[name=telephone]").val();
            var realname = $("input[name=realname]").val();
            var obj = { 
                username,
                password,
                telephone,
                realname
            }
    
            // ajax请求
            $.ajax({ 
                url: baseURL + "//baseUser/saveOrUpdate",
                method: "post",
                headers: { 
                    "Authorization": sessionStorage.getItem('token')
                },
                data: obj,
                success: function(res) { 
                    alert(res.message);
    
                    // 将模态框进行隐藏
                    $("#myModal").hide();
                    // 重新加载整个页面
    
                    loadAllUser();
                    clearInput();
                }
            })
    
            // console.log(obj);
            // console.log(username);
    
    
    
        }

**编辑当前被选中的用户信息**

点击编辑时，**获取当前数据的id**,然**后通过ajax向后台发送请求，然后将内容传到前台**，再将这些数据绑定到模态框的输入框中。

（之前我的想法是这样的，先将**前台页面当前行的数据进行获取**，然后将**前台的数据绑定到模态框**中，点击确定按钮时，然后**将模态框中的内容同id值一起封装到一个对象中**，再使用ajax对后台的接口进行交互，但是，我所用的新增的接口和编辑的接口是一样的，这样就会导致后台认为id的值重复，出现当前用户已经被占用这个错误）

第二种想法的代码：

// 编辑当前选中用户
        $("tbody").on({
            click: editUser
        }, ".edit");
    
    
        function editUser() {
            // console.log(this.innerHTML);
            // 获取姓名等内容
            var tr = $(this)[0].parentElement.parentElement;
            var inputId = $(this)[0].parentElement.parentElement.firstElementChild.firstElementChild;
            var id = $(inputId).val();
            console.log(id);
            var username = tr.children[1].innerText;
            var password = tr.children[2].innerText;
            var telephone = tr.children[3].innerText;
            var realname = tr.children[4].innerText;
    
    
            // 获取模态框输入框
            $("input[name=username]").val(username);
            $("input[name=password]").val(password);
            $("input[name=telephone]").val(telephone);
            $("input[name=realname]").val(realname);
    
            var username = $("input[name=username]").val();
            var password = $("input[name=password]").val();
            var telephone = $("input[name=telephone]").val();
            var realname = $("input[name=realname]").val();
    
            var obj = {
                id,
                username,
                password,
                telephone,
                realname
            };
    		$("#myModal").show();
    
            // 点击确定时
    
            $("#saveModelConfirm").click(function() {
                // 实现ajax请求
                $.ajax({
                    url: baseURL + "/baseUser/saveOrUpdate",
                    method: "post",
                    headers: {
                        "Authorization": sessionStorage.getItem('token')
                    },
                    data: obj,
                    success: function(res) {
    
                        // alert(res.message);
                        // 将模态框进行隐藏
                        $("#myModal").hide();
                        // 重新加载整个页面
                        clearInput();
                        loadAllUser();
                    }
    
                });
    
            });
    
    
        }

第一种想法的代码还没有编写

持续更新

**实现批量删除**

点击批量删除按钮，获取被选中的数据，属性值为checked，因为我的这个后台接口没有批量删除，所以我们就使用单个删除这个接口，使用map遍历

代码如下：

// 批量删除
        // 1.获取批量删除按钮
        //2.首先获取选中的id值
        //3.根据id的值去一一实现删除功能
        $("#delAllUser").on({ 
            click: delAllUser
        });
    
        function delAllUser() { 
            // console.log("sss");
            //2.首先获取选中的id值
    
            var ids = $("input[type=checkbox]:checked");
            ids.map(function(i, item) { 
                var id = $(item).val();
                //3.根据id的值去一一实现删除功能
                // 调用删除函数一一删除
                delUser();
    
                console.log("删除了" + id);
    
    
    
            });
    
            loadAllUser();
    
    
    
        }

**清空模态框中输入框中的内容**

将模态框中的值设置为空字符串

代码：

// 清空输入框中的内容
        function clearInput() { 
            $("input[name=username]").val("");
            $("input[name=password]").val("");
            $("input[name=telephone]").val("");
            $("input[name=realname]").val("");
            // alert("neirong");
    
        }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/32b8b2d8529b4065b0d81c96dce4b244.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/7bd4b08c347e44a0ae63cfd04cbd0608.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/e753becb89994506b7a3c50a215663ff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/746e0ef5335d4b96becae34ed75c5dea.png