Javascript?中AJAX的圖書管理代碼實例詳解
更新時間：2022年02月11日 14:35:46 作者：執(zhí)手天涯@
這篇文章主要為大家詳細介紹了AJAX的圖書管理代碼實例，使用數(shù)據(jù)庫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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('獲取圖書信息失敗??！')
// 定義一個空數(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請求進行圖書信息的添加
$.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)文章
div+css布局的圖片連續(xù)滾動js實現(xiàn)代碼
整理一個div+css圖片連續(xù)滾動代碼，原理跟腳本之家之前發(fā)布的文章一樣。2010-05-05
這篇文章主要介紹了JS實現(xiàn)的排列組合算法,結(jié)合完整實例形式詳細分析了排列組合算法的原理與javascript相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了PHP中使用微秒計算腳本執(zhí)行時間例子,本文先是講解了microtime函數(shù)的一些知識,然后給出了一個計算腳本運行時間的類,需要的朋友可以參考下2014-11-11
研究了一下JS的用setAttribute方法實現(xiàn)一個頁面兩份樣式表的效果與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
想實現(xiàn)點擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layui并未集成該工具欄，因此，需要自己手動添加這個功能；這篇文章主要介紹了layui點擊按鈕給table添加一行,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了基于three.js實現(xiàn)簡易照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下2016-03-03
JS中FileReader類實現(xiàn)文件上傳及時預(yù)覽功能
這篇文章主要為大家詳細介紹了JS中FileReader類實現(xiàn)文件上傳及時預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JavaScript變量基本使用方法,結(jié)合實例形式分析了JavaScript變量的類型、使用注意事項及命名規(guī)范,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡易的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01