Java小白学习指南【day42】---jQuery综合练习

最新推荐文章于 2023-01-08 23:17:14 发布

0423WANG

最新推荐文章于 2023-01-08 23:17:14 发布

阅读量138

点赞数

分类专栏：学习文章标签： java jquery ajax

本文链接：https://blog.csdn.net/WLK0423/article/details/111386852

版权

学习专栏收录该内容

55 篇文章 1 订阅

订阅专栏

jQuery综合练习

一、导入项目、搭建环境

导入ssm整合代码，本练习只需要使用jQuery的ajax和Bootstrap基于后台做一个CRUD操作

注意：

1、先改jdbc.properties中的数据库相关信息（例如密码）

2、准备好对应的数据库

3、发布项目

4、准备bootstrap相关文件

二、查询功能展示

1、准备静态网页

新疆一个HTML文件，index.html，编写前端展示的代码

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1 align="center">员工操作</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table" border="1" style="border-color: blue">
					<thead>
						<tr>
							<th>ID</th>
							<th>姓名</th>
							<th>性别</th>
							<th>地址</th>
							<th>电话</th>
							<th>卡号</th>
							<th>
								<div align="right">
									<button type="button" id="but_add" class="btn btn-info btn-xs">
										<span class="glyphicon glyphicon-plus" aria-hidden="true">添加</span>
									</button>
								</div>
							</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>

2、查询数据展示

<script type="text/javascript">
	$(function(){
		function load(){
			//利用Ajax进行数据的获取
			$.get("/emp/list",function(result){
                $("#tbody").empty();//数据加载到tbody中前，每次需要进行清空
				$(result).each(function(i,emp){//遍历获取的数据
					//将获取到的数据追加到tbody内
					var tr = "<tr>"
						+"<th>"+emp.id+"</th>"
						+"<th>"+emp.name+"</th>"
						+"<th>"+emp.sex+"</th>"
						+"<th>"+emp.address+"</th>"
						+"<th>"+emp.tel+"</th>"
						+"<th>"+emp.card+"</th>"
						+"</tr>"
					$("#tbody").append(tr)
				})
			})
		}
		load();
	})
</script>

三、删除数据

1、动态添加修改和删除按钮

var tr = "<tr>"
						+"<th>"+emp.id+"</th>"
						+"<th>"+emp.name+"</th>"
						+"<th>"+emp.sex+"</th>"
						+"<th>"+emp.address+"</th>"
						+"<th>"+emp.tel+"</th>"
						+"<th>"+emp.card+"</th>"
						+"<th>"
						+"<button type='button' id='but_upd' class='btn btn-success btn-xs'>"
						+"<span class='glyphicon glyphicon-pencil' aria-hidden='true'>修改</span>"
						+"</button>&emsp;"
						+"<button type='button' id='but_del' class='btn btn-danger btn-xs'>"
						+"<span class='glyphicon glyphicon-trash' aria-hidden='true'>删除</span>"
						+"</button>&emsp;"
						+"</th>"
						+"</tr>"
					$("#tbody").append(tr)

2、删除功能的实现

在按钮上加上属性，方便获取id的json对象

+"<button type='button' id='but_del' data-id="+emp.id+" class='btn btn-danger btn-xs'>"
						+"<span class='glyphicon glyphicon-trash' aria-hidden='true'>删除</span>"

删除功能的实现

//2、删除数据
		//先对删除按钮绑定事件，因为删除是动态生成的，所以需要事件委托
		$("#tbody").on("click","#but_del",function(){
			//获取id的json对象
			var id = $(this).data(id);
			//通过Ajax传递id至后台，接收返回的数据进行操作
			$.get("/emp/delete",id,function(result){
				if(result.success){
					load();
				}else{
					alert("删除失败!");
				}
			})
		})

3、删除的模态框

<div id="del_Modal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">警告</h4>
				</div>
				<div class="modal-body">
					<p style="color: red">确定要执行删除操作吗？</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="del_but_con" class="btn btn-primary">确认</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

删除功能的完整js代码

//先对删除按钮绑定事件，因为删除是动态生成的，所以需要事件委托
		$("#tbody").on("click","#but_del",function(){
			//获取id的json对象
			var id = $(this).data(id);
			//需要对模态框进行显示
			$("#del_Modal").modal("show")
			//添加模态框后，对确认按钮绑定事件
			$("#del_but_con").on("click",function(){
				//通过Ajax传递id至后台，接收返回的数据进行操作
				$.get("/emp/delete",id,function(result){
					if(result.success){
						load();
						//删除成功之后要关闭模态框
						$("#del_Modal").modal("hide");
					}else{
						alert("删除失败!");
					}
				})
			})
		})
		//给删除添加事件，类似于监听，模态框关闭后对事件进行取消
		$("#del_Modal").on('hidden.bs.modal', function (e) {
			$("#del_but_con").off;//模态框关闭后就取消确认按钮上的事件
		})

四、新增及修改数据

1、新增及修改模态框

  	<div id="add_edit_modal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">操作员工</h4>
				</div>
				<div class="modal-body">
<!-- 在模态框内部需要添加一个表单，用于员工的修改以及添加 -->
					<form id="add_form" class="form-horizontal" method="post" action="/emp/save">
					<!-- 处理修改时id变为添加的问题 -->
						<input type="hidden" id="emp_id" name="id">
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name">
							</div>
						</div>
						<div class="form-group">
							<label for="sex" class="col-sm-2 control-label">sex</label>
							<div class="col-sm-10">
								<label class="radio-inline">
									<input type="radio" name="sex" id="sex" value="1"> 
									男
								</label> 
								<label class="radio-inline"> 
									<input type="radio" name="sex" value="0">
									女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label for="address" class="col-sm-2 control-label">address</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="address" placeholder="请输入地址" name="address">
							</div>
						</div>
						<div class="form-group">
							<label for="tel" class="col-sm-2 control-label">tel</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="tel" placeholder="请输入电话" name="tel">
							</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" class="form-control" id="card" placeholder="请输入卡号" name="card">
							</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" id="but_save">保存</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

这里需要引入外部脚本，用来每次清空form表单jquery-form.js

<!-- 引入jquery-form.js脚本，因为是基于jQuery的，所以必须在jQuery之后引入 -->
<script src="static/js/jquery-form.js"></script>

//对添加按钮绑定事件，同时展示模态框
		$("#but_add").on("click",function(){
			$("#add_edit_modal").modal("show");//展示模态框
			$("#add_edit_modal").clearForm("show");//每次打开都需要清空form表单，这里是引入外部脚本
			
		})
		//对修改按钮绑定事件，与删除类似，因为修改是动态生成的，所以需要事件委托，同时展示模态框
		$("#tbody").on("click","#but_upd",function(){
			$("#add_edit_modal").modal("show");//展示模态框
			$("#add_edit_modal").clearForm("show");//每次打开都需要清空form表单，这里是引入外部脚本
			
		})
		//为了避免添加或者修改时候重复注册
		$("#add_edit_modal").on("hidden.bs.modal", function () {
			$("#but_save").off();
		})

2、修改时回显设置

会使用JQuery插件机制jquery-setForm.js，代码如下（记得到引入）

$.fn.setForm = function(jsonValue){//传入：JSON格式的数据
    var obj = this;
    $.each(jsonValue,function(name,ival){
        var $oinput = obj.find("input[name="+name+"]");
        if($oinput.attr("type")=="checkbox"){
            if(ival !== null){
                var checkboxObj = $("[name="+name+"]");
                var checkArray = ival.split(";");
                for(var i=0;i<checkboxObj.length;i++){
                    for(var j=0;j<checkArray.length;j++){
                        if(checkboxObj[i].value == checkArray[j]){
                            checkboxObj[i].click();
                        }
                    }
                }
            }
        }
        else if($oinput.attr("type")=="radio"){
            $oinput.each(function(){
                var radioObj = $("[name="+name+"]");
                for(var i=0;i<radioObj.length;i++){
                    if(radioObj[i].value == ival){
                        radioObj[i].click();
                    }
                }
            });
        }
        else if($oinput.attr("type")=="textarea"){
            obj.find("[name="+name+"]").html(ival);
        }
        else{
            obj.find("[name="+name+"]").val(ival);
        }
    })
}

引入脚本

<!-- 引入给表单赋值，回显-->
<script src="static/js/jquery-setForm.js"></script>

对修改按钮进行修改传递json数据

+"<button type='button' id='but_upd' data-object="+JSON.stringify(emp)+" class='btn btn-success btn-xs'>"
						+"<span class='glyphicon glyphicon-pencil' aria-hidden='true'>修改</span>"
						+"</button>&emsp;"

设置回显

//设置回显
			/* 记得修改前端代码中的name，不然回显不能确定位置！！！！ */
			var jsonobj = $(this).data("object");//根据按钮，获取到json的数据，获取到的是一个对象
			//调用方法，在表单内做显示
			$("#add_form").setForm(jsonobj);

3、保存数据

//为保存按注册事件
			$("#but_save").on("click",function(){
				//提交保存后，向后台发送保存信息
				$("#add_form").ajaxSubmit({
					//url:"/emp/save",
					success:function(data) {//点击之后提交的函数
						if(data.success){
							load();//重新记载数据
							$("#add_edit_modal").modal("hide");//关闭模态框
						}else{
							alert("添加失败")
						}
					}
				})

4、处理修改后再添加ID遗留问题

添加id隐藏标签

<!-- 处理修改时id变为添加的问题 -->
						<input type="hidden" id="emp_id" name="id">

//因为clearForm不会清理隐藏域，所以需要手动清理
			$("#emp_id").val("");

0423WANG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Java小白学习指南【day42】---jQuery综合练习

jQuery综合练习一、导入项目、搭建环境导入ssm整合代码，本练习只需要使用jQuery的ajax和Bootstrap基于后台做一个CRUD操作注意：1、先改jdbc.properties中的数据库相关信息（例如密码）2、准备好对应的数据库3、发布项目4、准备bootstrap相关文件二、查询功能展示1、准备静态网页新疆一个HTML文件，index.html，编写前端展示的代码<body> <div class="container"> <div
复制链接

扫一扫