ajax实现增删查改

liangzc66

于 2022-08-29 15:25:22 发布

阅读量1.8k

点赞数 4

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_57104988/article/details/126585236

版权

效果图：

html和css

<!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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
</head>
<style>
    table,
    th,
    td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        text-align: center;
        line-height: 30px;
        width: 1200px;
        margin-top: 10px;
    }

    /*  */
    .dialog {
        display: none;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        line-height: 40px;
    }

    .dialog .container {
        margin: 0 auto;
        font-size: 18px;
        width: 60%;
        height: 400px;
        background-color: #fff;
        text-align: center;
    }

    .dialog .container .dialog_header {
        background-color: red;
    }
</style>

<body>
    <button type="" id="login">登录</button>
    <button type="" id="load">加载</button>
    <input type="text">
    <select name="status">
        <option value="正常">正常</option>
        <option value="下架">下架</option>
    </select>
    <button type="" id="search">查询</button>
    <button type="" id="updata">新增</button>
    <table>
        <thead>
            <th>序号</th>
            <th>产品编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>状态</th>
            <th>所属栏目</th>
            <th>操作</th>
        </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>
            <div class="dialog_center">
                <div>状态:正常 <input type="radio" name="status" value="正常">
                    下架<input type="radio" name="status" value="下架">
                </div>
            </div>
            <div class="dialog_center">
                <div>价格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</input><input type="text" name="price"></div>
            </div>
            <div class="dialog_center">
                <div>产品描述:<textarea rows="" cols="" name="description"></textarea></div>
            </div>
            <div class="dialog_center">
            </div>

            <!-- 尾部 -->
            <div class="dialog_footer">
                <button class="cancel">取消</button>
                <button class="submit">确定</button>
            </div>
        </div>
    </div>
</body>

</html>

script（注意url需要修改成自己的接口地址）

 <script>
        //申明一个user全局对象
        var user = null
        var baseURL = ""     //此处填写自己的接口地址
        //复用申明成全局变量
        var obj = {
            page: 1,
            pageSize: 20,
        }
        //加载页面就获取本地token
        var token = sessionStorage.getItem('token')
        //点击登录获取token并保存到本地
        $('#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);
                    sessionStorage.setItem('token', res.data.token)
                    //全局配置请求全部携带token
                    $.ajaxSetup({
                        headers: {
                            "Authorization": sessionStorage.getItem('token')
                        }
                    })
                },
                //失败回调
                error() {

                }
            })
        })
        //加载按钮 展示产品
        $('#load').click(function () {
            //发送之前先清空，然后再加载数据
            $('tbody').empty()
            $.ajax({
                //请求方式
                url: baseURL + '/product/pageQuery',
                //请求方式
                method: 'get',
                //请求头
                headers: {
                    "Content-Type": "application/json"
                },
                //携带参数
                data: Qs.stringify(obj),
                //成功回调
                success(res) {
                    console.log(res.data.list);
                    //遍历数组 动态生成tr 
                    res.data.list.forEach((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 id="${item.id}" class="toDelete">删除</button><button class='toEdit' item = ${JSON.stringify(item)}>修改</button></td>
                        </tr>`
                        $('tbody').append(newTr)
                    });
                },
                //失败回调
                error() {

                }
            })
        })
        //删除按钮事件
        $('table tbody').on('click', '.toDelete', function () {
            var id = $(this).attr('id')
            console.log(id);
            var result = confirm('确认删除？')
            if (result) {
                $.ajax({
                    url: baseURL + '/product/deleteById',
                    method: 'get',
                    data: {
                        id: id
                    },
                    success(res) {
                        // console.log(res);
                        //提示用户删除成功
                        //刷新页面
                        $('#load').trigger('click')
                    },
                    error() {

                    }
                })
            } else {
                $('confirm').fadeOut()
            }
        })
        //全局配置
        if (token) {
            $.ajaxSetup({
                headers: {
                    'Authorization': token
                }
            })
            $('#load').trigger('click')
        } else {
            $('#login').trigger('click')
        }

        //查询按钮绑定事件
        $('#search').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) {
                    console.log(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 class='toEdit' item = ${JSON.stringify(item)}>修改</button></td>	
								</tr>
							`
                        $('tbody').append(newTr)
                    })
                },
            })
        })

        //给确定按钮绑定事件
        $('.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()
            //发送保存请求
            $.ajax({
                url: baseURL + '/product/saveOrUpdate',
                method: 'post',
                data: {
                    id: user ? user.id : "",
                    name,
                    status,
                    price,
                    description,
                    productCategoryId: 9441
                },
                success(res) {
                    console.log(res);
                    $('.dialog').fadeOut()
                    alert(res.message)
                    //刷新页面局部数据刷新
                    $('#load').trigger('click')
                },
                error(error) {

                }
            })
        })

        //给新增按钮绑定事件
        $('#updata').click(function () {
            $('.dialog').fadeIn()
            //清空表单数据
            var name = $('input[name=name]').val('')
            var status = $('input[type=radio]:checked').prop('checked', false)
            var price = $('input[name = price]').val('')
            var description = $('textarea[name=description]').val('')
        })
        //模态框取消按钮
        $('.cancel').click(function () {
            $('.dialog').fadeOut()
        })
        //给修改按钮绑定事件
        $('table tbody').on('click', '.toEdit', function () {
            $('.dialog').fadeIn()
            user = $(this).attr('item')
            user = JSON.parse(user)
            console.log(user);
            点击修改显示数据
            var name = $('input[name=name]').val(user.name)
            var status = $('input[type=radio][value = ' + user.status + ']').prop('checked', true)
            var price = $('input[name = price]').val(user.price)
            var description = $('textarea[name=description]').val(user.description)
        })
        //修改模态框标题
        $('.dialog_header').html('修改商品信息')

    </script>