Javascript 中AJAX的图书管理代码实例详解
目录
- 1、接口文档
- 2、代码结构
- 3、案例效果
- 总结
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、案例效果
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
jQuery Ajax请求状态管理器打包
然而,无论有多么接近,通过客户端与服务端的一来一回,必定会有等待加载数据的时间.所以,大多数网站都通过一个Gif动态图标或'Loading...'等字样来告知用户数据还在加载中.但有时候这个问题会非常繁琐和麻烦,要么将这个'Loading'显示在ajax请求之前,然后在ajax成功后隐藏它,或者将它写在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中来控制整个页面的ajax状态.前者方法使用起来太琐碎,每个请求都要写一遍这个'Loadin
-
jQuery通过deferred对象管理ajax异步
今天跟大家分享一个jquery中的对象-deferred.其实从jQuery 1.5.0版本开始引入的一个新功能----deferred对象.不过可能在实际开发过程中用到的并不多,所以没有太在意. 什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结
-
用户管理的设计_jquery的ajax实现二级联动效果
页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID
-
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
在实际应用中,我们要管理一个客户分类,实现对客户分类的增加.删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题. 准备阶段 您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识.要实现本文中的DEMO示例,首先需要一个mysql数据库: CREATE TABLE `catalist` ( `cid` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NU
-
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子. 本文将继续上篇文中的示例,完成编辑操作. 编辑项操作 用户通过单击"编辑"按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击"保存"按钮完成编辑操作,也可以单击"取消"按钮取消编辑状态. 首先,通过单击"编辑"
-
Javascript 中AJAX的图书管理代码实例详解
目录 1.接口文档 2.代码结构 3.案例效果 总结 1.接口文档 2.代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
-
JavaScript中关于递归与回溯的实例详解
目录 何为递归 构成递归条件 关于回溯 实际业务 组合问题 何为递归 递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环 构成递归条件 子问题须与原始问题为同样的事,且更为简单
-
javascript中2个感叹号的用法实例详解
在javascript代码中经常会见到!!的情况,本文即以实例形式较为深入的分析javascript中2个感叹号的用法.分享给大家供大家参考之用.具体分析如下: javascript中的!!是逻辑"非非",即是在逻辑"非"的基础上再"非"一次.通过!或!!可以将很多类型转换成bool类型,再做其它判断. 一.应用场景:判断一个对象是否存在 假设有这样一个json对象: { color: "#E3E3E3", "fon
-
Javascript中的方法和匿名方法实例详解
本文实例讲述了Javascript中的方法和匿名方法.分享给大家供大家参考.具体分析如下: Javascript方法(函数) 声明函数 以function开头,后跟函数名,与C#.java不同,Javascript不需要声明返回值类型.参数类型.没有返回值就是undefined. 举个例子更清楚: 无参数无返回值的方法: function f1(){ alert('这是一个方法'); } f1();//调用方法 无参数有返回值的方法: function f2(){ return 100; }
-
Javascript中函数分类&this指向的实例详解
JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);
-
JavaScript中变量提升和函数提升实例详解
js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端
-
Javascript 使用ajax与C#获取文件大小实例详解
Javascript ajax实现获取文件大小的方法. 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件大小)有些问题,具体大家试下就知道了,在此整理了一下ajax的获取文件大小的方法,比较好用,再调试过程中,出现了c:/fakepath/ 的错误,也将解决方案罗列在下面,以供大家参考 废话少说,代码如下 JS如下: <script language="Jscript"> function c
-
Java中IO流解析及代码实例详解
目录 1.IO流 1.流和流的分类 什么是IO流? IO流的分类? java.io包下需要掌握的流有16个: 2.如何使用流 1.输入流(读文件):FileInputStream 2.输出流(写文件):FileOutputStream 3.文件的拷贝 总结 1.IO流 1.流和流的分类 什么是IO流? I:Input (输入) O: Ouput(输出) IO流的分类? 有多种分类方式: 一种方式是按照流的方向进行分类: 以内存作为参照物 往内存中去,叫做输入(Input).或者叫做读(Read)
-
Struts2中实现web应用的初始化实例详解
Struts2中实现web应用的初始化实例详解 在JavsSE中,main方法为应用提供了入口,而在Android中,我们可以使用Application对于整个应用的生命周期进行管理,那么在基于Struts2的JavaEE应用中,如何实现类似的功能呢. 其中一种比较好的方式,是通过实现ServletContextListener接口进行坚挺,重写contextInitialized方法,实现自己需要进行的初始化操作,之后在web.xml中添加相应的listner,tomcat在启动服务时会调用相
-
JAVA 中解密RSA算法JS加密实例详解
JAVA 中解密RSA算法JS加密实例详解 有这样一个需求,前端登录的用户名密码,密码必需加密,但不可使用MD5,因为后台要检测密码的复杂度,那么在保证安全的前提下将密码传到后台呢,答案就是使用RSA非对称加密算法解决 . java代码 需要依赖 commons-codec 包 RSACoder.Java import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; import java.security.