写点什么

【jquery Ajax 练习】图书管理

  • 2022-11-22
    河北
  • 本文字数:2125 字

    阅读完需:约 7 分钟

​图书管理        目标通过 ajax 连接后台,进行后台图书数据的增删,然后将图书数据显示到页面上。


渲染 UI 结构     所需要到的库


用到的 css 库 bootstrap.css 用到的 javascript 库 jquery.js 用到的 vscode 插件 Bootstrap 3 Snippets 别忘了导入相关库,使用 bootstrap 库创建 ui 界面。


<body style="padding: 50px;">


<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="iptBookname" placeholder="请输入书名">
</div> <div class="input-group"> <div class="input-group-addon">作者</div> <input type="text" class="form-control" id="iptAuthor" placeholder="请输入书名">
</div> <div class="input-group"> <div class="input-group-addon">出版社</div> <input type="text" class="form-control" id="iptPublisher" placeholder="请输入书名">
</div> <button id="btnAdd" 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> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody></table>
复制代码


</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 出版社                 代码获取接口内的图书数据。


function a() {    $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {        if (res.status !== 200) {            return console.log(获取数据失败);        }        console.log(res);    })}a()
复制代码


原始数据的添加                将获取到的初始数据全部添加到表格中。


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}


$('tbody').on('click', '.del', function () {    let id = $(this).data('id');    console.log(id);    $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {        console.log(res);        if (res.status !== 200) {            return alert('删除失败');        }        a()    })})
复制代码


添加图书功能                文档添加图书


接口 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 加入

还未添加个人简介

评论

发布
暂无评论
【jquery Ajax 练习】图书管理_ajax_坚毅的小解同志_InfoQ写作社区