B045-jQuery案例实战&BootStrap

最新推荐文章于 2024-09-01 12:28:44 发布
最新推荐文章于 2024-09-01 12:28:44 发布
阅读量574 收藏
点赞数
分类专栏： 笔记总结 文章标签： jquery bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/131211992
版权
本文详细介绍了Bootstrap框架的使用，包括起步、布局容器、栅格系统和常用组件的创建。同时，提供了查询、添加、删除和修改数据的案例，涉及事件委托和AJAX请求。文章还展示了如何利用模态框进行数据修改，并实现了响应式设计，适用于不同尺寸的屏幕。
摘要由CSDN通过智能技术生成

目录

一、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>
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>
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>
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>
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>
表单
<!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>

三、案例实战

查询所有

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

  <script type="text/javascript">
  	$(function(){
  		$.ajax({
  			type:"post",
  			url:"/emp/findAll",
  			success:function(msg){
  				console.debug(msg)
  			}
  		});
  	});
  </script>

	@RequestMapping("/findAll")
	@ResponseBody
	List<Emp> findAll(){
		return service.findAll();
	}

<select id="findAll" resultType="emp">
    select * from emp
</select>
页面展示
<%@ 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>
按钮展示与完成
<%@ 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>
数据删除
事件委托
<!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>
获取按钮 - 绑定事件 - 拿到入参 - 发送删除请求
<%@ 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>

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

		try {
			service.delById(eid);
			return "ok";
		} catch (Exception e) {
			return e.getMessage();
		}
	}

<delete id="delById">
    delete from emp where eid = #{eid}
</delete>
删完之后再清空和查询-即刷新

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

<%@ 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>
添加数据
逻辑流程

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

准备模态框
<!-- 模态框  -->
<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 -->
发送保存请求
		// 添加
	  	$(".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);
				}
			});		
		});
后台添加完成
	@RequestMapping("/save")
	@ResponseBody
	public String save(Emp emp){

		try {
			service.add(emp);
			return "ok";
		} catch (Exception e) {
			return "no";
		}
	}

<insert id="add">
    insert into emp (ename,sex,address,tel,card)
    values(#{ename},#{sex},#{address},#{tel},#{card}) 
</insert>
添加前端处理
		// 添加
	  	$(".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("保存失败");
					}
				}
			});		
		});

完整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>
数据修改
逻辑流程

点击修改绑定事件展示模态框，
回显数据(模态框添加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>
后端
	@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";
		}
	}

<update id="update">
    update emp set ename=#{ename},sex=#{sex},address=#{address},tel=#{tel},card=#{card}
    where eid=#{eid}
</update>
XIAOMING820
关注
专栏目录
JQUERY案例
m0_49442965的博客
01-23 1334
尺寸位置操作 购物车操作 全选 each操作 祖宗选择器
JQuery案例
01-20
JQuery综合案例，适合于学习初级JQuery的的开发者,这是一个不错的案例,对你们有很多大的帮助请多多支持
jquery案例
m0_57732255的博客
01-25 1024
jquery案例 1：开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开光灯</title> <style> </style> </head> <body> <button id="btn1">开灯</button> <bu.
jQuery入门（六）jQuery实现瀑布流分页案例
最新发布
kong7906928的博客
09-01 429
瀑布流分页,jquery实现瀑布流分页
用JQuery做抽奖小活动（2020.11.30）
weixin_622464的博客
11-30 187
分析： 给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组，存放图片资源路径 * 生成随机数。数组索引 给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 效果图： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title>
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
前端工程师之jquery实战案例大集合
06-08
《前端工程师之jQuery实战案例大集合》是一份深入讲解JavaScript类库jQuery的实践教程，它为Web开发者提供了丰富的示例和技巧，旨在帮助前端工程师更好地掌握和应用jQuery。jQuery作为一个强大的JavaScript库，以其...
QJuery实战-微博案例全套教学
04-05
在本套"QJuery实战-微博案例全套教学"中，我们将深入学习jQuery这一强大的JavaScript库，通过构建微博应用的实例来掌握其核心概念、功能和最佳实践。jQuery简化了DOM操作、事件处理、动画效果以及Ajax交互，使得前端...
bootstrap4案例
12-10
Bootstrap 4 是一个广泛使用的前端框架，用于快速构建响应式、移动优先的网页设计。这个“bootstrap4案例”集合提供了一个实用的示例，...教师则可以利用此案例进行实战教学，帮助学生更好地理解和应用Bootstrap技术。
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQuery Web开发案例教程（在线实训版）》案例源码.zip是一个包含丰富的jQuery实践案例的压缩包，旨在帮助学习者深入理解和应用jQuery库在Web开发中的功能和技巧。这个资源对于初学者和有一定经验的开发者来说都是...
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
jQuery案例
WangZhang_521的博客
05-06 2697
01-精品展示案例 <!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"> <t
jQuery 案例
不因俊俏难为友，正为风流始读书
06-03 624
*5 jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
Bootstrap与jQuery UI响应式框架实战指南
"Bootstrap与jQuery UI框架设计（前端开发工程师系列）" 本教程详细介绍了前端开发中的两个重要框架——Bootstrap和jQuery UI，旨在帮助前端开发工程师掌握响应式网页设计的关键技能。Bootstrap是由Twitter推出的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值