【jquery Ajax 练习】图书管理
图书管理 目标通过 ajax 连接后台，进行后台图书数据的增删，然后将图书数据显示到页面上。
渲染 UI 结构 所需要到的库
用到的 css 库 bootstrap.css 用到的 javascript 库 jquery.js 用到的 vscode 插件 Bootstrap 3 Snippets 别忘了导入相关库，使用 bootstrap 库创建 ui 界面。
<body style="padding: 50px;">
</body>
获取原始图书数据 文档请求的根路径
图书列表
接口 URL： /api/getbooks 调用方式： GET 参数格式：参数名称 参数类型 是否必选 参数说明 id Number 否 图书 Idbookname String 否 图书名称 author String 否 作者 publisher String 否 出版社响应格式：数据名称 数据类型 说明 status Number 200 成功；500 失败；msg String 对 status 字段的详细说明 data Array 图书列表+id Number 图书 Id+bookname String 图书名称+author String 作者+publisher String 出版社 代码获取接口内的图书数据。
原始数据的添加 将获取到的初始数据全部添加到表格中。
let rows = [];$.each(res.data, function (i, item) {rows.push(<tr><td>${item.id} </td><td> ${item.bookname}</td><td> ${item.author}</td><td>${item.publisher} </td><td><a href='javascript:;' class='del'>删除</a></td></tr>)})$('#tb').empty().append(rows)})
删除图书功能 文档删除图书
接口 URL： /api/delbook 调用方式： GET 参数格式：参数名称 参数类型 是否必选 参数说明 id Number 是 图书 Id 响应格式：数据名称 数据类型 说明 status Number 200 删除成功；500 未指定要删除的图书 Id；501 执行 Sql 报错；502 要删除的图书不存在；msg String 对 status 字段的详细说明 代码需要在 a 标签里添加一个 data-id 自定义属性，
删除后台服务器中的图书数据，并重新调用获取数据进行显示。
data-id=${item.id}
添加图书功能 文档添加图书
接口 URL： /api/addbook 调用方式： POST 参数格式：参数名称 参数类型 是否必选 参数说明 bookname String 是 图书名称 author String 是 作者 publisher String 是 出版社响应格式：数据名称 数据类型 说明 status Number 201 添加成功；500 添加失败；msg String 对 status 字段的详细说明 代码 添加后台服务器中的图书数据，并重新调用获取数据进行显示。
('#btnAdd').on('click', function () {//获取填写内容 不能为空let bookname = ('#iptBookname').val().trim();let author = ('#iptAuthor').val().trim();let publisher = ('#iptPublisher').val().trim();if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {return alert('请填写完整图书信息')}.ajax({type: 'post',url: 'http://www.liulongbin.top:3006/api/addbook',data: {bookname: bookname,author: author,publisher: publisher},success:function (res) {if (res.status !== 201) {return alert('添加失败');}a()('#iptBookname').val('');('#iptAuthor').val('');('#iptPublisher').val('');}})a()})
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论