ajax图书管理案例

rows数组中就是：

rows.join('')整体添加

单引号里面如何加参数

语法可以通过"'+ 参数+'" 即2 双引号里面加2 单引号加两个加号 data="'+url+'"

str.trim()：可以去除字符串两端的空格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Bootstrap 实例 - 响应式的列重置</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><body style="padding:15px"><!-- 添加图书的panel面板 --><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 input-group-lg "><span class="input-group-addon ">书名</span><input type="text " class="form-control " id='iptBookname' placeholder="请输入书名 "></div><div class="input-group input-group-lg "><span class="input-group-addon ">作者</span><input type="text " class="form-control " id='iptAuthor' placeholder="请输入作者 " style="width:300px "></div><div class="input-group input-group-lg "><span class="input-group-addon ">出版社</span><input type="text " class="form-control " id='iptPublisher' placeholder="请输入出版社 " style="width:300px "></div><button id="btnAdd" class="btn btn-primary ">添加</button></div></div><!-- 图书表格 --><table class="table table-bordered"><thead><tr><th>id</th><th>书名</th><th>作者</th><th>出版社</th><th>操作</th></tr></thead><tbody id="tb"></tbody></table><script>$(function() {//获取图书列表的数据function getBooklist() {$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {console.log(res)// console.log(res)  判断获取数据是否成功if (res.status != 200) return alert('获取数据失败')//如果获取成功，就需要对获取到的数据进行循环，将其添加到表格中，会拿到一个图书对象var 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" data-id="' + item.id + '">删除</a></td></tr>')})console.log(rows);//将数据添加到表格中$('#tb').empty().append(rows.join(''))})}getBooklist()//按下删除键，不仅要把显示中的对应图书删去，还要删去数据库中的图书信息//给a链接添加事件，根据id来拿到唯一的图书数据// $('.del').on({//     click: function() {//         alert(2)//     }// })//没有触发--因为a链接是后期通过DOM操作判断进去的。后期判断的元素无法这样绑定事件，只能通过代理的形式。//因此事件需要绑定在他的父级上，然后再利用事件委托到自己上$('tbody').on('click', '.del', function() {var id = $(this).attr('data-id')//删除图书功能，需要发起get请求 //必须指定删除的id，根据id删除图书console.log(id);$.get('http://www.liulongbin.top:3006/api/delbook', {id: id}, function(res) {if (res.status !== 200) return alert('删除失败')getBooklist()})})//为添加按钮绑定事件，获取前面三个文本框中的值，对值进行非法值的校验不能为空。里面有内容就发请求，添加图书$('#btnAdd').on({click: function() {//获取文本框的值var bookname = $('#iptBookname').val().trim()var author = $('#iptAuthor').val().trim()var publisher = $('#iptPublisher').val().trim()if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {alert('请填写完整的图书信息！')}$.post('http://www.liulongbin.top:3006/api/addbook', { //请求接口bookname: bookname,author: author,publisher: publisher}, function(res) {if (res.status !== 201) return alert('添加图书失败')//如果没有添加失败，那么就需要重新获取里面的图书信息，添加到表格中getBooklist()//此时再情况上面的内容文本框中的内容$('#iptBookname').val('')$('#iptAuthor').val('')$('#iptPublisher').val('')})//还要屏蔽掉空格//添加图书功能，需要post。给服务器根据接口文档}})})</script>
</body></html>

ajax图书管理案例相关推荐

026_图书管理案例
1. 新建一个名为Books的动态Web工程 1.1. 添加gson-2.8.5.jar 1.2. 编写Book.java package com.bjbs.action;import java.io ...
Vue 实现图书管理案例
案例效果案例思路图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮添加图书实现表单的静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑修改图书修改信息填 ...
vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...
Django案例——图书管理案例
文章目录项目开始前 App的建立和路由分配数据库的建立与连接模型映射(建立表格) 视图函数最终的效果图项目代码连接见:链接:https://pan.baidu.com/s/1mRYMVZkp ...
Vue 图书管理案例
这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值, 感兴趣的小伙伴们可以参考一下 <!DOCTYPE html> <html lang="en& ...
Ajax — 图书管理
注意:本项目基于 jQuery 文件下进行的 Ajax 请求项目,需要映入jQuery文件! <body style="padding: 15px;"><!-- ...
附录1.图书管理案例
目录 1 静态页面 2 后端 3 JS部分点击添加可以添加新的图书数据存放在数据库中,刷新页面后,数据不变点击删除后可以删除指定的图书 1 静态页面在视频中用到了Bootstrap提供 ...
案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
案例:图书管理 Vue数组操作 1.变异方法:会影响数组的原始数据的变化. 2.替换数组:不会影响原始的数组数据,而是形成一个新的数组. <!DOCTYPE html> <html ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...

ajax图书管理案例

ajax图书管理案例相关推荐

最新文章

热门文章