[JavaScript知识库]使用jquery封装的ajax实现增删改查

ajax: 浏览器和服务器数据交互的网页技术，异步得xml和javascript

使用接口，用jquery封装的ajax接收后端传的数据。

静态方法
jQuery/$.ajax({
?? ?url:"",
?? ?method:"",
?? ?data:{},
?? ?headers:{},
?? ?success(res){},
?? ?error(err){}
?? ?...
});
ajax全局请求配置
$.ajaxSetup({
?? ?headers:{
?? ??? ?"Authorization":token
?? ?}
});

引入

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
<script src="./jquery-3.3.1.min.js"></script>

HTML代码

 <button class="login">登录</button>
    <button class="load">加载数据</button>
    <input type="text">
    <select name="" id="">
        <option value="正常">正常</option>
        <option value="下架">下架</option>
    </select>
    <button class="toSearch">查询</button>
    <button class="toAdd">新增</button>
    <!--表格展示数据  -->
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>产品编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>状态</th>
                <th>所属栏目</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <!-- 模态框 -->
    <div class="dialog">
        <div class="container">
            <!-- 头部 -->
            <div class="dialog_header">
                新增产品信息

            </div>
            <!-- 体部 -->
            <div class="dialog_center">
                <!-- 表单控件 -->
                <!-- 保存或者更新 -->
                <div>
                    产品名称：<input type="text" name="name">
                </div>
                <div>
                    状态：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常：<input type="radio" name="status" value="正常">
                    下架： <input type="radio" name="status" value="下架">
                </div>
                <div>
                    价格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="price">
                </div>
                <div>产品描述：<textarea name="description" id="" cols="30" rows="10"></textarea></div>
            </div>
            <!-- 尾部 -->
            <div class="dialog_footer">
                <button class="cancel">取消</button>
                <button class="submit">确定</button>
            </div>
        </div>
    </div>

CSS代码

 table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
            line-height: 30px;
            width: 1200px;
            margin-top: 10px;
        }

        /* 初始化模态框样式 */
        .dialog {
            width: 100%;
            background-color: rgb(0, 0, 0, 0.5);
            /*vh可视区  */
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            line-height: 40px;
            display: none;
        }

        /* 初始化模态框样式 */
        .dialog .container {
            font-size: 18px;
            width: 60%;
            height: 400px;
            /* calc函数 计算上下margin */
            margin: calc((100vh - 400px)/2) auto;
            background-color: #fff;
        }

        .dialog .container .dialog_header {
            background-color: cornflowerblue;
        }

        .dialog .container .dialog_footer button {
            position: relative;
            left: 350px;
            display: inline-block;
            width: 50px;

        }

JS代码

登录按钮事件

 $(function () {
            // 声明全局
            var baseURL = "http://22.129.34.47:8033";
            // 声明一个全局变量
            var user = null;

            // 声明成全局变量
            var obj = {
                page: 1,
                pageSize: 20

            }

            // 登录按钮：点击登录 获取token 存储起来 配置到ajax全局对象
            $('.login').click(function () {
                var obj = {
                    username: 'admin1',
                    password: 123321
                };
                // 发送登录请求
                $.ajax({
                    // 请求路径
                    url: baseURL + '/user/login',
                    // 请求方式
                    method: "post",
                    // 请求头
                    headers: {
                        // 设置数据格式
                        "Content-Type": "application/json"
                    },
                    // 携带参数
                    data: JSON.stringify(obj),

                    // 成功回调
                    success(res) {
                        console.log(res);
                        // 存储token
                        sessionStorage.setItem('token', res.data.token);
                        // 全局配置ajax请求 全部携带token
                        $.ajaxSetup({
                            headers: {
                                "Authorization": sessionStorage.getItem('token')
                            }

                        });
                        //登录的时候加载数据 
                        // 异步请求
                        $('.load').trigger('click');

                    },
                    // 失败回调
                    error(err) {

                    }
                })
            })


       

        })

加载按钮事件

 // 加载按钮 将所有产品信息展示到表格中
            // 1.获取产品信息 展示到tobody中
            $('.load').click(function () {
                // 提供清空某一个元素内容的方法
                $('tbody').empty();
                $.ajax({
                    url: baseURL + "/product/pageQuery",
                    method: "get",
                    data: Qs.stringify(obj),
                    success(res) {
                        console.log(res.data.list);
                        // 遍历数组 动态生成tr 插入到tbody中
                        res.data.list.forEach(function (item, index) {
                            console.log(item);
                            var newTr = `
                            <tr>
                            <td>${index + 1}</td>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.price}</td>
                            <td>${item.status}</td>
                            <td>${item.category.name}</td>
                            <td><button class='toDelete' id='${item.id}'>删除</button><button item='${JSON.stringify(item)}' class='toEdit'>修改</button></td>
                            </tr>
                            `
                            $('tbody').append(newTr);
                        })
                    },

                    error(err) {

                    }
                })
            })

删除按钮事件

  // 因为删除按钮是动态生成的，所有不能绑定事件，只能用事件代理
            // 删除按钮事件  事件代理
            $('table tbody').on('click', '.toDelete', function () {
                var id = $(this).attr('id');
                // console.log(id);
                // 发送一个请求 根据id删除当前的数据
                var result = confirm('确定删除吗?');
                if (result) {
                    // 点击确定 继续删除 继续发送删除请求
                    $.ajax({
                        url: baseURL + "/product/deleteById",
                        method: "get",
                        // 第一个id式后端需要的参数 id
                        // 第二个id是自己点击按钮取得的变量id
                        data: { id: id },
                        success(res) {
                            // console.log(res);
                            // 提示用户删除成功
                            alert(res.message);
                            // 刷新页面
                            $('.load').trigger('click');
                        },
                        error(err) {

                        }
                    })
                } else {
                    $('confirm').fadeOut();
                }
            })

解决页面刷新丢失数据问题

// 解决页面刷新丢失问题  ajaxSetup请求设置全局默认 之后执行的所有AJAX请求，如果对应的选项参数没有设置，将使用全局默认设置。
            var token = sessionStorage.getItem('token');
            if (token) {
                $.ajaxSetup({
                    headers: {
                        'Authorization': token
                    }
                })
                // 模拟点击加载数据
                $('.load').trigger('click')
            } else {
                // 假设token失效 
                $('.login').trigger('click');

            }

查询按钮事件

 // 给查询按钮绑定事件 点击查询 按钮name查询
            $('.toSearch').click(function () {
                $('tbody').empty();
                // page pageSize name
                let temp = {
                    ...obj,
                    name: $('input:first').val(),
                    status: $('select:first').val()
                };
                $.ajax({
                    url: baseURL + "/product/pageQuery",
                    method: 'get',
                    data: Qs.stringify(temp),
                    success(res) {
                        res.data.list.forEach(function (item, index) {
                            var newTr = `
                            <tr>
                            <td>${index + 1}</td>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.price}</td>
                            <td>${item.status}</td>
                            <td>${item.category.name}</td>
                            <td><button class='toDelete' id='${item.id}'>删除</button><button>修改</button></td>
                            </tr>
                            `
                            $('tbody').append(newTr);
                        })
                    },
                })
            })

给确定按钮事件

 // 给确认按钮绑定事件
            //1.获取用户输入的内容
            // 2.发送保存请求 将数据插入到数据库中
            // 3.提示用户保存成功 关闭模态框 刷新页面
            $('.submit').click(function () {
                // 获取用户输入的内容
                var name = $('input[name=name]').val();
                var status = $('input[type=radio]:checked').val();
                var price = $('input[name=price]').val();
                var description = $('textarea[name=description]').val();
                console.log(name, status, price, description);
                // 发送保存请求
                $.ajax({
                    url: baseURL + "/product/saveOrUpdate",
                    method: "post",
                    data: {
                        // name:name,
                        // status:status,
                        // price:price,
                        // description:description
                        // es6对象属性简写形式 属性名和变量名重名 可以简写为属性
                        id: user ? user.id : "",
                        name,
                        status,
                        price,
                        description,
                        // 分类ip
                        productCategoryId: 9441
                    },
                    success(res) {
                        console.log(res);
                        // 保存成功
                        // 1.关闭模态框
                        $('.dialog').fadeOut();
                        // 2.提示保存成功
                        alert(res.message);
                        // 3.刷新页面 局部数据刷新
                        $('.load').trigger('click');
                        // location.reload 全局刷新

                    },
                    error(err) {

                    }
                })
            })

新增按钮事件

 // 给新增按钮绑定事件
            $('.toAdd').click(function () {
                // 模态框显示
                $('.dialog').fadeIn();
                $('.dialog_header').html('新增产品信息');
                // 清空表单数据
                $('input[name=name]').val("");
                $('input[type=radio]:checked').prop("checed", false);
                $('input[name=price]').val("");
                $('textarea[name=description]').val("");
            });

取消按钮事件

            // 给取消按钮绑定事件
            $('.cancel').click(function () {
                // 模态框隐藏
                $('.dialog').fadeOut();
            })

?修改按钮事件

// 给修改按钮绑定事件  事件代理
            $('table tbody').on('click', '.toEdit', function () {
                // 1.弹出模块框
                $('.dialog').fadeIn();
                // 2.点击哪一个修改按钮 获取当前的数据
                user = $(this).attr('item');
                user = JSON.parse(user);
                console.log(user);
                // 3.将当前行数据设置给表单信息
                $('input[name=name]').val(user.name);
                $('input[type=radio][value=' + user.status + ']').prop("checed", true);
                $('input[name=price]').val(user.price);
                $('textarea[name=description]').val(user.description);
                // 4.修改模态框标题为修改产品信息
                $('.dialog_header').html('修改产品信息');

            })