<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 bootstrap.css -->
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body style="padding-top: 20px;">
<!-- 定义容器 -->
<div class="container">
<div class="row">
<div class="col-sm-8">
<!-- 2.展示图书区域 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<!-- 内容区 -->
<!-- bootstrap官网 => css全局样式 => 表格 => 带边框的表格+鼠标悬停 -->
<tbody>
<tr>
<td>1</td>
<td>西游记</td>
<td>吴承恩</td>
<td>北京图书出版社</td>
<td>
<a class="btn btn-sm btn-danger" href="javascript:;">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-4">
<!-- 1.添加图书区域 -->
<!-- bootstrap官网 => 组件 => 面板 => 带标题的面版 => 情境效果 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">添加图书</h3>
</div>
<div class="panel-body">
<form id="addForm">
<!-- 放入多个input -->
<!-- bootstrap官网 => css全局样式 => 表单 => 内联表单 - 中的第三个 -->
<div>
<!-- 书名 -->
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">书 名</label>
<div class="input-group">
<div class="input-group-addon">书 名</div>
<input type="text" class="form-control" id="inpBookname" name="bookname"
placeholder="请输入书名">
</div>
</div>
<!-- 作者 -->
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">作 者</label>
<div class="input-group">
<div class="input-group-addon">作 者</div>
<input type="text" class="form-control" id="inpAuthor" name="author"
placeholder="请输入作者">
</div>
</div>
<!-- 出版社 -->
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">出版社</label>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="inpPublisher" name="publisher"
placeholder="请输入出版社">
</div>
</div>
<!-- 按钮 -->
<button id="btnAdd" type="submit" class="btn btn-info">添加</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 导入jQuery 和 axios.js-->
<script src="./lib/jquery.js"></script>
<script src="./lib/axios.js"></script>
<!-- 书写自己的js -->
<script>
$(function () {
// 给ajax配置好基础路径
function initBooks() {
// axios.defaults.baseURL = ' http://192.168.87.26:3009'
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
axios.get('/api/getbooks').then(({ data: res }) => {
console.log(res)
if (res.code != 200) {
return alert('加入失败')
}
tbody.innerHTML = res.data.map(item =>
`
<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<a data-id="${item.id}" class="btn btn-del btn-sm btn-danger" href="javascript:;">删除</a>
</td>
</tr>`).join('')
})
}
let tbody = document.querySelector('tbody')
initBooks()
let addForm = document.querySelector('#addForm')
addForm.onsubmit = function (e) {
e.preventDefault()
axios.post('/api/addbook', $(addForm).serialize()).then(({ data: res }) => {
console.log(res)
if (res.code != 201) {
return alert(res.msg)
}
alert('添加成功')
addForm.reset()
initBooks()
})
}
tbody.onclick = function (e) {
if (!e.target.classList.contains('btn-del')) {
return
}
let id = e.target.getAttribute('data-id')
axios.delete('/api/delbook', {
params: {
id: id
}
}).then(({ data: res }) => {
console.log(res)
if (res.code != 200) {
return alert(res.msg)
}
alert('恭喜成功了')
initBooks()
})
}
});
</script>
</body>
</html>
图书馆添加删除判断 ajax.get 请求 ajax.post响应 考试专用
需积分: 14 136 浏览量
2022-04-17
10:55:52
上传
评论
收藏 178KB ZIP 举报
考试2图书馆.zip （9个子文件） 
图书管理案例.html 7KB
lib 
jquery.js 86KB axios.min.map 116KB axios.map 68KB axios.js 13KB axios.min.js 13KB bootstrap.css 119KB bootstrap.min.css.map 371KB 代码题2接口文档.md 3KB
评论0