今天小编给大家分享一下怎么用Javascript AJAX代码实现图书管理的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1、接口文档

2、代码结构

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./lib/bootstrap.css"><scriptsrc="./lib/jquery.js"></script></head><style>body{margin:20px20px;}</style><body><divclass="panelpanel-primary"><divclass="panel-heading"><h4class="panel-title">图书信息</h4></div><divclass="panel-bodyform-inline"><divclass="input-group"><divclass="input-group-addon">书名</div><inputtype="text"class="form-control"id="bookName"placeholder="请输入书名"></div><divclass="input-group"><divclass="input-group-addon">作者</div><inputtype="text"class="form-control"id="author"placeholder="请输入作者"></div><divclass="input-group"><divclass="input-group-addon">出版社</div><inputtype="text"class="form-control"id="ippublisher"placeholder="请输入出版社"></div><buttontype="button"id="btnSend"class="btnbtn-primary">添加</button></div></div><tableclass="tabletable-borderedtable-hover"><thead><tr><th>Id</th><th>书名</th><th>作者</th><th>出版社</th><th>操作</th></tr></thead><tbodyid="tb"></tbody></table></body><script>//渲染图书信心到表格中$(function(){//发起ajax请求获取图书列表信息getBookList();functiongetBookList(){$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){if(res.status!==200)returnalert('获取图书信息失败！！')//定义一个空数组存放图书信息varrow=[];//遍历获取到的信息添加到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><ahref=""id="del"data-id="${item.id}">删除</a></td></tr>`)})//将数组数据渲染到页面$('#tb').empty().append(row.join(''))})}//删除图书信息$('tbody').on('click','#del',function(){varid=$(this).attr('data-id');$.get('http://www.liulongbin.top:3006/api/delbook',{id:id},function(res){if(res.status!==200)returnalert('删除图书失败！！')getBookList();})})//添加图书$('#btnSend').on('click',function(){varbookName=$('#bookName').val().trim()varauthor=$('#author').val().trim()varippublisher=$('#ippublisher').val().trim()if(bookName.length<=0||author.length<=0||ippublisher.length<=0){returnalert('请填写完整的图书信息！')}//发起ajax请求进行图书信息的添加$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:bookName,author:author,publisher:ippublisher},function(res){if(res.status!==201)returnalert('添加图书信息失败！！'+res.msg)getBookList()$('#bookName').val('')$('#author').val('')$('#ippublisher').val('')})})})</script></html>3、案例效果

以上就是“怎么用Javascript AJAX代码实现图书管理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。