欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript?中AJAX的圖書管理代碼實(shí)例詳解

 更新時(shí)間：2022年02月11日 14:35:46   作者：執(zhí)手天涯@  
這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例，使用數(shù)據(jù)庫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1、接口文檔

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

2、代碼結(jié)構(gòu)

<!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>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>
<style>
    body {
        margin: 20px 20px;
    }
</style>
<body>
    <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="bookName" placeholder="請輸入書名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="author" placeholder="請輸入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="ippublisher" placeholder="請輸入出版社">
            </div>

            <button type="button" id="btnSend" class="btn btn-primary">添加</button>
        </div>
    </div>

    <table class="table table-bordered table-hover"> 
        <thead>
            <tr>
                <th>Id</th>
                <th>書名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>
</body>
<script>
    // 渲染圖書信心到表格中
    $(function () {
        // 發(fā)起ajax請求獲取圖書列表信息
        getBookList();
        function getBookList() {
            $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                if (res.status !== 200) return alert('獲取圖書信息失敗?。?)
                // 定義一個(gè)空數(shù)組存放圖書信息
                var row = [];
                // 遍歷獲取到的信息添加到row數(shù)組
                $.each(res.data, function (i, item) {
                    row.push(`
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.bookname}</td>
                            <td>${item.author}</td>
                            <td>${item.publisher}</td>
                            <td>
                                <a href="" id="del" data-id="${item.id}">刪除</a>
                            </td>
                        </tr>
                    `)
                })
                // 將數(shù)組數(shù)據(jù)渲染到頁面
                $('#tb').empty().append(row.join(''))
            })
        }
        // 刪除圖書信息
        $('tbody').on('click', '#del', function () {
            var id = $(this).attr('data-id');
            $.get('http://www.liulongbin.top:3006/api/delbook', {
                id: id
            }, function (res) {
                if (res.status !== 200) return alert('刪除圖書失?。?！')
                getBookList();
            })
        })
        // 添加圖書
        $('#btnSend').on('click', function () {
            var bookName = $('#bookName').val().trim()
            var author = $('#author').val().trim()
            var ippublisher = $('#ippublisher').val().trim()
            if (bookName.length <= 0 || author.length <= 0 || ippublisher.length <= 0) {
                return alert('請?zhí)顚懲暾膱D書信息！')
            }
            // 發(fā)起ajax請求進(jìn)行圖書信息的添加
            $.post('http://www.liulongbin.top:3006/api/addbook', {
                bookname: bookName,
                author: author,
                publisher: ippublisher
            }, function (res) {
                if (res.status !== 201) return alert('添加圖書信息失?。?！' + res.msg)
                getBookList()
                $('#bookName').val('')
                $('#author').val('')
                $('#ippublisher').val('')
            })
        })
    })
</script>
</html>

3、案例效果

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!    

相關(guān)文章

最新評論