尚筹网：角色维护之新增角色

步骤

• 给“新增”按钮绑定单击响应函数
• 打开模态框
• 给“保存”按钮绑定单击响应函数
  • 收集文本框内容
  • 发送请求
  • 请求处理完成关闭模态框、重新分页、清理表单

给"新增"按钮绑定单击响应函数

标记"新增按钮"

将/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp中的

<button type="button" class="btn btn-primary"
							style="float: right;" onclick="window.location.href='form.html'">
							<i class="glyphicon glyphicon-plus"></i> 新增
						</button>

替换为

	<button  id="addBtn" type="button" class="btn btn-primary"
							style="float: right;" >
							<i class="glyphicon glyphicon-plus"></i> 新增
						</button>

绑定单击响应函数

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

	$("#addBtn").click(function(){
			
			alert("aaa...");
			
		});

打开模态框

准备模态框

1、创建/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-role-add.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<form role="form">
				<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">
					<input type="text" id="roleNameInput" class="form-control" placeholder="请输入角色名称" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-plus"></i> 保存</button>
					<button type="reset" class="btn btn-primary"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
				</div>
			</form>
		</div>
	</div>
</div>

2、将include-modal-role-add.jsp包含到role-page.jsp

	<%@ include file="/WEB-INF/include-modal-role-add.jsp" %>
</body>

打开模态框

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

		$("#addBtn").click(function(){
			$("#addModal").modal("show");
		});

给“保存”按钮绑定单击响应函数

前端

标记"保存"按钮： id=“addModalBtn”

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-role-add.jsp：

绑定单击响应函数

$("#addModalBtn").click(function(){
	
	// 1.收集文本框内容
	var roleName = $.trim($("#roleNameInput").val());
	
	if(roleName == null || roleName == "") {
		layer.msg("请输入有效角色名称！");
		return ;
	}
	
	// 2.发送请求
	$.ajax({
		"url":"role/save/role.json",
		"type":"post",
		"data":{
			"roleName":roleName
		},
		"dataType":"json",
		"success":function(response){
			
			var result = response.result;
			
			if(result == "SUCCESS") {
				layer.msg("操作成功！");
				
				// 3.操作成功重新分页
				// 前往最后一页
				window.pageNum = 999999;
				showPage();
			}
			
			if(result == "FAILED") {
				layer.msg(response.message);
			}
			
			// 4.不管成功还是失败，关闭模态框
			$("#addModal").modal("hide");
			
			// 5.清理本次在文本框填写的数据
			$("#roleNameInput").val("");
			
		},
		"error":function(response){
			layer.msg(response.message);
		}
	});
	
});

后端

控制

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/RoleHandler.java：

	@ResponseBody
	@RequestMapping("/role/save/role")
	public ResultEntity<String> saveRole(@RequestParam("roleName") String roleName) {
		
		roleService.saveRole(roleName);
		
		return ResultEntity.successWithoutData();
	}

服务

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/service/impl/RoleServiceImpl.java

	@Override
	public void saveRole(String roleName) {
		roleMapper.insert(new Role(null, roleName));
	}