Javascript 中AJAX的图书管理代码实例详解
更新时间：2022年02月11日 14:35:46 作者：执手天涯@
这篇文章主要为大家详细介绍了AJAX的图书管理代码实例，使用数据库，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
1、接口文档
2、代码结构
<!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 () {
// 发起ajax请求获取图书列表信息
getBookList();
function getBookList() {
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
if (res.status !== 200) return alert('获取图书信息失败！！')
// 定义一个空数组存放图书信息
var row = [];
// 遍历获取到的信息添加到row数组
$.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>
`)
})
// 将数组数据渲染到页面
$('#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('请填写完整的图书信息！')
}
// 发起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、案例效果
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
这篇文章主要介绍了微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析),需要的朋友可以参考下2020-04-04
有关this想必大家早有所耳闻，只不过在使用中不是那么在意而已，接下来为大家介绍下this做事件参数问题，感兴趣的你可不要错过了哈2013-03-03
我们在做项目的时候，特别是注册用户的时候，基本上都需要有注册协议之类的东西，那么我们如何判断用户是否勾选了同意了此协议呢？2014-06-06
这篇文章主要介绍了如何使用Lottie制作动画,包括创建动画文件.json、实现效果、在Git仓库中保存和共享、运行动画以及在动画天堂下载和显示JSON动画,文中通过代码及图文介绍的非常详细,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了通过javascript实现段落的收缩与展开,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
javascript实现相同事件名称，不同命名空间的调用方法
这篇文章主要介绍了javascript实现相同事件名称，不同命名空间的调用方法,涉及javascript命名空间及事件调用的技巧,需要的朋友可以参考下2015-06-06
forEach和map方法都是基于数组的迭代器实现的,它们的主要区别在于对回调函数的处理方式,这篇文章主要介绍了JS中forEach()和map()的区别,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了JS实现简易换图时钟功能,结合实例形式分析了javascript结合时间函数定时变换显示图片实现时钟功能的相关操作技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下2018-01-01
JavaScript的for循环中嵌套一个点击事件的问题解决
本文主要介绍了JavaScript的for循环中嵌套一个点击事件点击一次弹出多个相同的值的解决方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下2015-05-05
最新评论