js案例:图书管理

m0_63400611

已于 2022-05-18 16:03:01 修改

阅读量544

点赞数

分类专栏： ajax 文章标签： javascript bootstrap vue.js

于 2021-12-25 14:46:37 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122142953

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

插件

bootstrap.css

jQuery.js

VSCode插件:Bootstrap 3 Snippets

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aaa</title>
	<script src="jQuery/jQuery.js"></script>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/>
</head>

<body style="padding: 15px;">
	
	
	<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>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td></td>
			</tr>
		</tbody>
	</table>
	
	
	<script>
		$(function() {
			//获取图书列表数据
			function getBookList() {
				$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
					// console.log(res);
					if(res.status != 200) return alert('获取数据失败!');
					console.log(res);
					console.log(res.data);
					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 class="del" href="javascript:;" data-id="'+item.id+'">删除</a></td></tr>')
						// console.log(i);
						// console.log(item);
					})
//					console.log(rows);
//					console.log(rows.join(''));
					$('#tb').empty().append(rows.join(''));
				}) 
			}
			getBookList();

			//通过代理的方式为动态添加元素(.del)添加点击事件
			$('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();
				})
				console.log(id);
			})

			$('#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) {
					return 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('');
				})
			})
		})
	</script>
	
</body>
</html>

分析

获取图书数据:getBookList()方法

function getBookList() {
				$.get('http://www.liulongbin.top:3006/api/getbooks', function(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 class="del" href="javascript:;" data-id="'+item.id+'">删除</a></td></tr>')
						// console.log(i);
						// console.log(item);
					})
					$('#tb').empty().append(rows.join(''));
				})
			}

res和res.data的区别:

上为res,下为res.data

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

使用$.get()方法获取代码中链接的数据,并建立一个rows数据用来存放数据

使用$.each()方法遍历数组rows($.each(数组名), 调用方法(元素序号,数组中的数据){}

rows.push将括号内的内容存放进数组中,一个<tr></tr>标签中包含五个<td></td>,其中包含与thead对应的数据

最后选择器$('#tb')选择id="tb"的<tbody></tbody>使用empty()方法清空里面的所有元素,再使用append()将rows数组中的内容写进tbody,join('')方法即将数组中的所有元素转换为一个字符串,括号内的参数为分隔符,代码中为没有分隔符

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

上为console.log(rows);

下位console.log(rows.join(''));

通过代理的方式为动态元素.del绑定点击事件

	//通过代理的方式为动态添加元素(.del)添加点击事件
	$('tbody').on('click', '.del', function () {
		var id = $(this).attr('data-id');
		console.log(id);
	})

在插入"删除"的<a></a>标签时自定义了data-id类名,因为是动态添加的元素,所以不能直接绑定事件

attr('')返回被选元素的属性值

为添加按钮绑定点击事件实现添加图书功能

$('#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) {
					return 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('');
				})
			})

分别为三个输入框定义变量获取输入框中的内容value值,通过trim()方法让输入框中的字符串左右的空格无效

通过判断语句判断当三个输入框中有value为空或者只有空格的情况是返回错误

在添加图书成功后调用getBookList()方法重新加载图书数据,再将三个输入框中的文字即value设置为空

m0_63400611

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js案例:图书管理

插件bootstrap.cssjQuery.jsVSCode插件:Bootstrap 3 Snippets代码<!doctype html><html><head><meta charset="utf-8"><title>aaa</title> <script src="jQuery/jQuery.js"></script> <link rel="stylesheet" h
复制链接

扫一扫