XM的小窝


 

ajax接口小练习

这玩意还挺好玩,以为接口是共享的,所以甚至有人在里面聊天()() :鹿乃_???:

演示

HTML部分

<!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="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/sytle.css">
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <!-- 添加图书Panel -->
    <!-- 使用bs3快捷指令 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">
            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookName" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div>
            <button type="button" class="btn btn-primary" id="add">添加</button>
            <button type="button" class="btn btn-primary" id="delOneClick">一键删除</button>
            <button type="button" class="btn btn-primary" id="radomFill">开始随机填充</button>
        </div>
    </div>

    <!-- 图书表格 -->

    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="bookList">
        </tbody>
    </table>
    <script src="./js/index.js"></script>
</body>

</html>

js部分

function getBookList() {
    // ajax请求
    $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
        //判断请求是否成功
        if (res.status !== 200) return alert('获取图书失败!');
        //渲染页面
        $('#bookList').empty();
        $.each(res.data, (index, data) => {
            // console.log(data);
            $('#bookList').append(`<tr>
                <td>${data.id}</td>
                <td>${data.bookname}</td>
                <td>${data.author}</td>
                <td>${data.publisher}</td>
                <td style="text-align:center"><a href="javascript:;">删除</a></td>
            <tr>`);
        });
    })
}
getBookList();

function addBooks(name1, aut, pub) {
    $.post('http://www.liulongbin.top:3006/api/addbook', {
        bookname: name1,
        author: aut,
        publisher: pub
    }, function(res) {
        console.log(res.msg);
        if (res.status !== 201) {
            alert(res.msg)
        }
    })

}

function delBooks(num) {
    $.get('http://www.liulongbin.top:3006/api/delbook', {
        id: num
    }, function(res) {
        console.log('第' + num + '个图书' + res.msg);
        //删除失败的回调
        if (res.status !== 200) {
            // alert(res.msg)
        }
    })
}

function delBooksRange(num, num1) {
    var d = setInterval(() => {
        $.get('http://www.liulongbin.top:3006/api/delbook', {
            id: num--
        }, function(res) {
            console.log('第' + num + '个图书' + res.msg);
        })
        if (num < num1) {
            clearInterval(d);
        }
    }, 120);
}
//定时刷新(大嘘)
var dd = setInterval(function() {
    getBookList()
}, 500);

//手动添加
$('#add').on('click', function() {
    addBooks($('#iptBookName').val(), $('#iptAuthor').val(), $('#iptPublisher').val());
    getBookList();
});

//事件委托绑定删除按钮
$("tbody").on('click', 'a', function() {
    var id = parseInt($(this).parent().siblings('td').eq(0).html());
    delBooks(id);
    //即时更新
    getBookList();
});

//一键删除
$('#delOneClick').on('click', function() {
    $('a').click();
    getBookList();
});

//随机填充
let fillstatus = false;
let interval;
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
$('#radomFill').on('click', function() {
    if (fillstatus === false) {
        $(this).html('停止随机填充');
        interval = setInterval(() => {
            let msg = $('#iptPublisher').val();
            let msg1 = $('#iptAuthor').val();
            let rand = arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)] + arr[Math.floor(Math.random() * 26)];
            addBooks(rand, msg1 ? msg1 : rand, msg ? msg : rand)
        }, 300);
        fillstatus = true;
    } else {
        $(this).html('开始随机填充');
        fillstatus = false;
        clearInterval(interval);
    }
});
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注