小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

B045-jQuery案例实战&BootStrap_jquery web开发案例教程

作者：小丑西瓜9 | 2024-05-18 09:56:38

踩

jquery web开发案例教程

一、BootStrap概述

jQuery本身不带样式，要自己设置，bootStrap有，可以直接看着选用，不用自己调来调去。相当于带有现成样式的前端组件库。
Bootstrap是最受欢迎的 HTML、CSS 和 JS 前端框架，用于开发响应式布局、移动设备优先的 WEB 项目

注意事项：
1.像百度、淘宝之类的大公司网页不使用响应式，而是独立开发一套手机页面
2.一般网站的交互很少，仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少，非常适合做成响应式

二、BootStrap使用

1.起步

1.下载或放入BootStrap文件到本地工程里

2.在html代码中引入1个css文件和两个js文件

中文网 - v3中文文档 - 起步 - 基本模板

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../docs-assets/js/html5shiv.js"></script>
      <script src="../../docs-assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果

全局CSS样式，组件，JS插件，

0.实战案例-环境准备

在这里插入图片描述

0.实战案例-基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <link href="/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.布局容器

table布局 - 不满足复杂的布局情况
div布局 - 麻烦

bootStrap版容器布局

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <link href="/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" "/js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    
    <style type="text/css">
		.container{
			background: red
		}
		.container-fluid{
			background: green
		}
	</style>
	
  </head>
  <body>
	<div class="container">两端留空白</div><br>
	<div class="container-fluid">两端填充满</div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.栅格系统

原理和应用见html文档和word文档，可根据不同尺寸屏幕做适应。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<link href="/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript""/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>

	<style type="text/css">
		div {
			border: 1px solid red;
		}
	</style>

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
			<div class="col-md-1 col-sm-3 col-xs-4">.col-md-1</div>
		</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4.常用组件

表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!--   引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!--   引入bootstrap 的js文件    要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
	<div class="container"><!-- 留边 -->
		<table class="table table-bordered table-hover"><!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr class="success">
					<td>111</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr class="warning">
					<td>111</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr class="danger">
					<td>111</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr class="active">
					<td>111</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!--   引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!--   引入bootstrap 的js文件    要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
	
</head>
<body>
	<div class="container"><!-- 留边 -->
		<form class="form-horizontal">
		  <div class="form-group">
		    <label for="username" class="col-sm-2 control-label">用户名</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" id="username" placeholder="请输入用户名">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
		    </div>
		  </div>
		 
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-default">提交</button>
		    </div>
		  </div>
		</form>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

三、案例实战

查询所有

页面加载完成后直接发异步请求拿数据
将数据放入新增的标签中

  <script type="text/javascript">
  	$(function(){
  		$.ajax({
  			type:"post",
  			url:"/emp/findAll",
  			success:function(msg){
  				console.debug(msg)
  			}
  		});
  	});
  </script>
1
2
3
4
5
6
7
8
9
10
11

	@RequestMapping("/findAll")
	@ResponseBody
	List<Emp> findAll(){
		return service.findAll();
	}
1
2
3
4
5

<select id="findAll" resultType="emp">
    select * from emp
</select>
1
2
3

页面展示

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet">
    
  </head>
  <body>
  	<div class="container">							<!-- 留边 -->
		<table class="table table-bordered ">		<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
	</div>
   <script type="text/javascript">
  	$(function(){
  		$.ajax({
  			type:"post",
  			url:"/emp/findAll",
  			success:function(msg){
  				//console.debug(msg)
  				$.each(msg,function(){                                                                                           var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>操作</td></tr>";
  	  				$("#tb").append(tr);
  				});
  			}
  		});
  	});
  </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

按钮展示与完成

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet">
    
  </head>
  <body>
  	<div class="container">							<!-- 留边 -->
		<table class="table table-bordered ">		<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作&nbsp&nbsp&nbsp
						<button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span>&nbsp添加</button>
					</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
	</div>
   <script type="text/javascript">
  	$(function(){
  		$.ajax({
  			type:"post",
  			url:"/emp/findAll",
  			success:function(msg){
  				//console.debug(msg)
  				$.each(msg,function(){
  					// 准备按钮
  	  				var btn = "<button class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-trash'></span>&nbsp删除</button>&nbsp&nbsp"+
  	  							"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span>&nbsp修改</button>";
  					// 准备一个tr
  					var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
  					// 把tr放入tbody中
  					$("#tb").append(tr);
  				});
  			}
  		});
  	});
  </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

数据删除

事件委托

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<!-- css样式 -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!--   引入jquery 的js文件 -->
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<!--   引入bootstrap 的js文件    要在jquery的js文件下面 -->
<script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body>
	<input type="button" value="添加p元素" />
	<p>111</p>
	<p>222</p>
	<p>333</p>
	<script type="text/javascript">
		$(function() {
			$('input').click(function() {
				$('body').append('<p>新添加的p元素</p>');
			});

			/* $('p').on('click', function() {
				$(this).remove();
			}); */

			//与上面效果一样（如果不传选择器，就是普通的事件绑定，传了就是事件委托）
			 $('body').on('click', 'p', function() {
			// 委托给祖先类		由p标签来做
				$(this).remove();
			}); 
		});
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<!-- 留边 -->
		<table class="table table-bordered ">
			<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作&nbsp&nbsp&nbsp
						<button class="btn btn-success btn-sm">
							<span class="glyphicon glyphicon-plus"></span>&nbsp添加
						</button>
					</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
  	$(function(){
  		$.ajax({
  			type:"post",
  			url:"/emp/findAll",
  			success:function(msg){
  				//console.debug(msg)
  				$.each(msg,function(){
  					// 准备按钮
  	  				var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span>&nbsp删除</button>&nbsp&nbsp"+
  	  							"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span>&nbsp修改</button>";
  					// 准备一个tr
  					var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
  					// 把tr放入tbody中
  					$("#tb").append(tr);
  				});
  			}
  		});
  	});
  	
  	// 删除，动态生成的元素，需要事件委托机制
  	$("tbody").on("click",".del",function(){
  		// 获取eid ->即请求入参
  		var eid = $(this).parent().parent().find("td:eq(0)").text();
  		// alert(eid)
  		// 发送删除请求
		$.ajax({
			type: "post",
			url: "/emp/delById",
			data:"eid="+eid,
			success: function(msg){
				console.debug(msg);
			}
		});
	});		
  	
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

	@RequestMapping("/delById")
	@ResponseBody
	public String delById(Integer eid){

		try {
			service.delById(eid);
			return "ok";
		} catch (Exception e) {
			return e.getMessage();
		}
	}
1
2
3
4
5
6
7
8
9
10
11

<delete id="delById">
    delete from emp where eid = #{eid}
</delete>
1
2
3

删完之后再清空和查询-即刷新

封装查询所有方法—查询所有前先清空
删除成功就查询所有—即刷新

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<!-- 留边 -->
		<table class="table table-bordered ">
			<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作&nbsp&nbsp&nbsp
						<button class="btn btn-success btn-sm">
							<span class="glyphicon glyphicon-plus"></span>&nbsp添加
						</button>
					</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
	
		//封装查询所有
		function list(){
			// 清空数据
			$("#tb").empty();
			
			$.ajax({
	  			type:"post",
	  			url:"/emp/findAll",
	  			success:function(msg){
	  				//console.debug(msg)
	  				$.each(msg,function(){
	  					// 准备按钮
	  	  				var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span>&nbsp删除</button>&nbsp&nbsp"+
	  	  							"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span>&nbsp修改</button>";
	  					// 准备一个tr
	  					var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
	  					// 把tr放入tbody中
	  					$("#tb").append(tr);
	  				});
	  			}
	  		});
		}
		
		// 页面加载完发送查询所有的请求
	  	$(function(){
	  		list();
	  	});
  	
	  	// 删除，动态生成的元素，需要事件委托机制
	  	$("tbody").on("click",".del",function(){
	  		// 获取eid ->即请求入参
	  		var eid = $(this).parent().parent().find("td:eq(0)").text();
	  		// alert(eid)
	  		// 发送删除请求
			$.ajax({
				type: "post",
				url: "/emp/delById",
				data:"eid="+eid,
				success: function(msg){
					//console.debug(msg);
					if(msg.indexOf("ok")!=-1){
						// 查询所有，刷新
						list();
					}else{
						alert("删除失败");
					}
				}
			});
		});		
  	
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

添加数据

逻辑流程

点击添加 - 出现模态框 - 填写表单 - 保存数据

准备模态框

<!-- 模态框  -->
<div id="saveModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加数据</h4>
            </div>
            <div class="modal-body">

                <!-- 表单 -->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="ename" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sex" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex1" value="男"> 男
                            </label>
                            <label class="checkbox-inline">
                                <input type="radio" name="sex" id="sex2" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="adress" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" name="adress" class="form-control" id="adress" placeholder="请输入地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tel" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="card" class="col-sm-2 control-label">card</label>
                        <div class="col-sm-10">
                            <input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

发送保存请求

		// 添加
	  	$(".add").click(function(){
			// 清空模态框中的form表单   js的方法 reset()
			$("form")[0].reset();
			// 显示模态框
			$("#saveModal").modal("show");	
	  	})

		// 保存操作
		$("#save").click(function(){
			// 发送请求 保存操作
			$.ajax({
				type: "post",
				url: "/emp/save",
				data: $("form").serialize(), // 获取form中的数据
				success: function(msg){
					console.debug(msg);
				}
			});		
		});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

后台添加完成

	@RequestMapping("/save")
	@ResponseBody
	public String save(Emp emp){

		try {
			service.add(emp);
			return "ok";
		} catch (Exception e) {
			return "no";
		}
	}
1
2
3
4
5
6
7
8
9
10
11

<insert id="add">
    insert into emp (ename,sex,address,tel,card)
    values(#{ename},#{sex},#{address},#{tel},#{card}) 
</insert>
1
2
3
4

添加前端处理

		// 添加
	  	$(".add").click(function(){
			// 清空模态框中的form表单   js的方法 reset()
			$("form")[0].reset();
			// 显示模态框
			$("#saveModal").modal("show");	
	  	})
	  	
	  	// 保存操作
		$("#save").click(function(){
			// 发送请求 保存操作
			$.ajax({
				type: "post",
				url: "/emp/save",
				data: $("form").serialize(), // 获取form中的数据
				success: function(msg){
					if(msg.indexOf("ok")!=-1){
						// 关闭模态框
						$("#saveModal").modal("hide");						
						// 查询所有，刷新
						list();
					}else{
						alert("保存失败");
					}
				}
			});		
		});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

完整JSP

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<!-- 留边 -->
		<table class="table table-bordered ">
			<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作&nbsp&nbsp&nbsp
						<button class="add btn btn-success btn-sm">
							<span class="glyphicon glyphicon-plus"></span>&nbsp添加
						</button>
					</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
		
		<!-- 模态框  -->
		<div id="saveModal" class="modal fade">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title">添加数据</h4>
		      </div>
		      <div class="modal-body">
		      
		        <!-- 表单 -->
		        <form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="ename" class="col-sm-2 control-label">姓名</label>
				    <div class="col-sm-10">
				      <input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="sex" class="col-sm-2 control-label">性别</label>
				    <div class="col-sm-10">
				        <label class="radio-inline">
						  <input type="radio" name="sex" id="sex1" value="男"> 男
						</label>
						<label class="checkbox-inline">
						  <input type="radio" name="sex" id="sex2" value="女"> 女
						</label>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="address" class="col-sm-2 control-label">地址</label>
				    <div class="col-sm-10">
				      <input type="text" name="address" class="form-control" id="address" placeholder="请输入地址">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="tel" class="col-sm-2 control-label">电话</label>
				    <div class="col-sm-10">
				      <input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="card" class="col-sm-2 control-label">card</label>
				    <div class="col-sm-10">
				      <input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
				    </div>
				  </div>
				</form>
				
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="save" class="btn btn-primary">保存</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
	</div>
	<script type="text/javascript">
	
		//封装查询所有
		function list(){
			// 清空数据
			$("#tb").empty();
			
			$.ajax({
	  			type:"post",
	  			url:"/emp/findAll",
	  			success:function(msg){
	  				//console.debug(msg)
	  				$.each(msg,function(){
	  					// 准备按钮
	  	  				var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span>&nbsp删除</button>&nbsp&nbsp"+
	  	  							"<button class='btn btn-primary btn-sm'><span class='glyphicon glyphicon-wrench'></span>&nbsp修改</button>";
	  					// 准备一个tr
	  					var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
	  					// 把tr放入tbody中
	  					$("#tb").append(tr);
	  				});
	  			}
	  		});
		}
		
		// 页面加载完发送查询所有的请求
	  	$(function(){
	  		list();
	  	});
  	
	  	// 删除，动态生成的元素，需要事件委托机制
	  	$("tbody").on("click",".del",function(){
	  		// 获取eid ->即请求入参
	  		var eid = $(this).parent().parent().find("td:eq(0)").text();
	  		// alert(eid)
	  		// 发送删除请求
			$.ajax({
				type: "post",
				url: "/emp/delById",
				data:"eid="+eid,
				success: function(msg){
					//console.debug(msg);
					if(msg.indexOf("ok")!=-1){
						// 查询所有，刷新
						list();
					}else{
						alert("删除失败");
					}
				}
			});
		});	
	  	
	  	// 添加
	  	$(".add").click(function(){
			// 清空模态框中的form表单   js的方法 reset()
			$("form")[0].reset();
			// 显示模态框
			$("#saveModal").modal("show");	
	  	})
	  	
	  	// 保存操作
		$("#save").click(function(){
			// 发送请求 保存操作
			$.ajax({
				type: "post",
				url: "/emp/save",
				data: $("form").serialize(), // 获取form中的数据
				success: function(msg){
					if(msg.indexOf("ok")!=-1){
						// 关闭模态框
						$("#saveModal").modal("hide");						
						// 查询所有，刷新
						list();
					}else{
						alert("保存失败");
					}
				}
			});		
		});
  	
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

数据修改

逻辑流程

点击修改绑定事件展示模态框，
回显数据(模态框添加eid隐藏域input框单选框的值回显)，
修改，
发送修改请求，
拿到数据刷新，
添加里清空隐藏域id

前端

<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<!-- 留边 -->
		<table class="table table-bordered ">
			<!-- 带边框的表格 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>地址</th>
					<th>电话</th>
					<th>卡号</th>
					<th>操作&nbsp&nbsp&nbsp
						<button class="add btn btn-success btn-sm">
							<span class="glyphicon glyphicon-plus"></span>&nbsp添加
						</button>
					</th>
				</tr>
			</thead>
			<tbody id="tb">
			</tbody>
		</table>
		
		<!-- 模态框  -->
		<div id="saveModal" class="modal fade">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title">添加或修改数据</h4>
		      </div>
		      <div class="modal-body">
		      
		        <!-- 表单 -->
		        <form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="ename" class="col-sm-2 control-label">姓名</label>
				    <div class="col-sm-10">
				      <input type="text" name="ename" class="form-control" id="ename" placeholder="请输入姓名">
				      <input type="hidden" name="eid" id="eid" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="sex" class="col-sm-2 control-label">性别</label>
				    <div class="col-sm-10">
				        <label class="radio-inline">
						  <input type="radio" name="sex" id="sex1" value="男"> 男
						</label>
						<label class="checkbox-inline">
						  <input type="radio" name="sex" id="sex2" value="女"> 女
						</label>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="address" class="col-sm-2 control-label">地址</label>
				    <div class="col-sm-10">
				      <input type="text" name="address" class="form-control" id="address" placeholder="请输入地址">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="tel" class="col-sm-2 control-label">电话</label>
				    <div class="col-sm-10">
				      <input type="text" name="tel" class="form-control" id="tel" placeholder="请输入电话">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="card" class="col-sm-2 control-label">card</label>
				    <div class="col-sm-10">
				      <input type="text" name="card" class="form-control" id="card" placeholder="请输入卡号">
				    </div>
				  </div>
				</form>
				
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="save" class="btn btn-primary">保存</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
	</div>
	<script type="text/javascript">
	
		//封装查询所有
		function list(){
			// 清空数据
			$("#tb").empty();
			
			$.ajax({
	  			type:"post",
	  			url:"/emp/findAll",
	  			success:function(msg){
	  				//console.debug(msg)
	  				$.each(msg,function(){
	  					// 准备按钮
	  	  				var btn = "<button class='btn btn-warning btn-sm del'><span class='glyphicon glyphicon-trash'></span>&nbsp删除</button>&nbsp&nbsp"+
	  	  							"<button class='btn btn-primary btn-sm update'><span class='glyphicon glyphicon-wrench'></span>&nbsp修改</button>";
	  					// 准备一个tr
	  					var tr="<tr class='success'><td>"+this.eid+"</td><td>"+this.ename+"</td><td>"+this.sex+"</td><td>"+this.address+"</td><td>"+this.tel+"</td><td>"+this.card+"</td><td>"+btn+"</td></tr>";
	  					// 把tr放入tbody中
	  					$("#tb").append(tr);
	  				});
	  			}
	  		});
		}
		
		// 页面加载完发送查询所有的请求
	  	$(function(){
	  		list();
	  	});
  	
	  	// 删除，动态生成的元素，需要事件委托机制
	  	$("tbody").on("click",".del",function(){
	  		// 获取eid ->即请求入参
	  		var eid = $(this).parent().parent().find("td:eq(0)").text();
	  		// alert(eid)
	  		// 发送删除请求
			$.ajax({
				type: "post",
				url: "/emp/delById",
				data:"eid="+eid,
				success: function(msg){
					//console.debug(msg);
					if(msg.indexOf("ok")!=-1){
						// 查询所有，刷新
						list();
					}else{
						alert("删除失败");
					}
				}
			});
		});	
	  	
	  	// 添加
	  	$(".add").click(function(){
			// 清空模态框中的form表单   js的方法 reset()
			$("form")[0].reset();
			// 清空隐藏域的eid
			$("#eid").val("");
			// 显示模态框
			$("#saveModal").modal("show");	
	  	})
	  	
	  	// 修改
		// 绑定点击事件  事件委托机制
		$("tbody").on("click",".update",function(){
			// 回显数据    -- 
			// 获取数据
			// 获取id
			var eid = $(this).parent().parent().find("td:eq(0)").text();
			var ename = $(this).parent().parent().find("td:eq(1)").text();// 姓名
			var sex = $(this).parent().parent().find("td:eq(2)").text(); // 性别
			var address = $(this).parent().parent().find("td:eq(3)").text();//  地址
			var tel = $(this).parent().parent().find("td:eq(4)").text();// 电话
			var card = $(this).parent().parent().find("td:eq(5)").text(); //卡号
			
			// 把数据放入form中数据回显
			$("#ename").val(ename);
			$("#sex1,#sex2").val([sex]);	// 也可判断后分别赋值
			$("#address").val(address);
			$("#tel").val(tel);
			$("#card").val(card);
			$("#eid").val(eid);
				
			// 模态框展示
			$("#saveModal").modal("show");
		})
	  	
	  	// 保存操作 添加与修改都走这里
		$("#save").click(function(){
			// 发送请求 保存操作
			$.ajax({
				type: "post",
				url: "/emp/save",
				data: $("form").serialize(), // 获取form中的数据
				success: function(msg){
					if(msg.indexOf("ok")!=-1){
						// 关闭模态框
						$("#saveModal").modal("hide");						
						// 查询所有，刷新
						list();
					}else{
						alert("保存失败");
					}
				}
			});		
		});
  	
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

后端

	@RequestMapping("/save")
	@ResponseBody
	public String save(Emp emp){

		try {
			if (emp.getEid()==null) {
				service.add(emp);
			}else{
				service.update(emp);
			}
			
			return "ok";
		} catch (Exception e) {
			return "no";
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<update id="update">
    update emp set ename=#{ename},sex=#{sex},address=#{address},tel=#{tel},card=#{card}
    where eid=#{eid}
</update>
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/587806

B045-jQuery案例实战&BootStrap_jquery web开发案例教程

目录

一、BootStrap概述

二、BootStrap使用

1.起步

1.下载或放入BootStrap文件到本地工程里

2.在html代码中引入1个css文件和两个js文件

3.复制模板代码到本地html文件里会自动应用成bootStrap图样中的效果

0.实战案例-环境准备

0.实战案例-基本模板

2.布局容器

3.栅格系统

4.常用组件

表格

表单

三、案例实战

查询所有

页面展示

按钮展示与完成

数据删除

事件委托

获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求

删完之后再清空和查询-即刷新

添加数据

逻辑流程

准备模态框

发送保存请求

后台添加完成

添加前端处理

数据修改

逻辑流程

前端

后端