jQ-Ajax原生接口

135 阅读1分钟
登陆

用户名:

密码:

邮箱:

手机号:

查询
    </tbody>
</table>
<script src="./jquery-1.12.4.js"></script>
<script>
    /* 点击登陆 */
    let url = "http://timemeetyou.com:8889/api/private/v1/";
    $('#buttonId1').click(function () {
        $.post(url + 'login', { username: 'admin', password: '123456' }, function (res) {
            localStorage.token = res.data.token;//储存数据
            $('#buttonId1').slideUp('slow');
            getUsers();
        })
    })
    /* 获取用户列表数据 */
    function getUsers() {
        $.ajax({
            url: url + 'users',
            headers: {
                Authorization: localStorage.token
            },
            data: {
                pagenum: 1,
                pagesize: 10
            },
            success: function (res) {
                console.log(res);
                $('tbody').html('');/* 先清空数据 */
                for (var i in res.data.users) {
                    $('tbody').append(/* 在抽入 */
                        `<tr>
<td>${res.data.users[i].username}</td>
<td>${res.data.users[i].mobile}</td>
<td>${res.data.users[i].email}</td>
<td><button onclick='del(${res.data.users[i].id})'>删除</button></td>
</tr>`
                     //删除列表
                    )
                }
            }
        })
    }

    $('#buttonId2').click(function () {
        $.ajax({
            url: url + 'users/' + $('#userId').val(),
            headers: {
                Authorization: localStorage.token
            },
            success: function (res) {
                /* 出现提示 */
                $('#msg').html(res.meta.msg)
                /* 过三秒 提示消失 */
                setTimeout(function () {
                    $('#msg').html('')
                }, 3000)
                /* 更新最新的表格信息 */
                // getUsers();
                $('tbody').html('');
                $('tbody').append(
                    `
                        <tr>
                            <td>${res.data.username}</td>
                            <td>${res.data.mobile}</td>
                            <td>${res.data.email}</td>
                            <td><button onclick="del(${res.data.id})">删除</button></td>
                        </tr>
                    `
                )

            }
        })
    })
    /* 删除 */
    function del(id) {
        console.log(id);
        $.ajax({
            url: url + 'users/' + id,
            method: 'delete',
            headers: {
                Authorization: localStorage.token
            },
            /* */
            success: function (res) {
                $('#msg').html(res.meta.msg)
                setTimeout(function () {
                    $('#msg').html('')
                }, 3000)
                getUsers();/* 更新最新表格信息 */
            }
        })
    }
    /* 添加数据 */
    $('#submit').click(function () {
        $.ajax({
            url: url + 'users',
            method: 'post',
            headers: {
                Authorization: localStorage.token
            },
            data: {
                username: $('#username').val(),
                password: $('#password').val(),
                email: $('#email').val(),
                mobile: $('#mobile').val(),
            },
            success: function (res) {
                $('#msg').html(res.meta.msg)
                setTimeout(function () {
                    $('#msg').html('')
                }, 3000)
                $('#username').val('')
                $('#password').val('')
                $('#email').val('')
                $('#mobile').val('')
                getUsers();
            }
        })
    })
</script>
姓名 电话 电子邮箱