主要有两种形式,一种是直接跳转到某个页面,一种是保存数据。
1、直接跳转到某个页面,同时又需要携带数据,controller如下所示:
@RequestMapping("menus")
public String menus(HttpServletRequest request) {
List<MenuPo> menus = menuService.getMenus();
request.setAttribute("menus", menus);
return "admin-menu";
}
点击菜单管理栏目,跳转到菜单管理的页面,并且携带菜单中的数据menus,在前端展示所有菜单的信息。
前端代码如下所示:
<table class="table table-border table-bordered table-bg">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox"></th>
<th width="40">ID</th>
<th width="200">菜单名称</th>
<th>是否使用</th>
</tr>
</thead>
<tbody>
<c:forEach items="${menus}" var="menu">
<tr class="text-c">
<td><input type="checkbox" value="${menu.mid}" name="check"></td>
<td>${menu.mid}</td>
<td>${menu.name}</td>
<td><c:if test="${menu.use}">可用</c:if><c:if test="${!menu.use}">不可用</c:if></td>
</tr>
</c:forEach>
</tbody>
</table>
根据后端传过来的menus,对所有菜单进行遍历,并显示出相应的菜单id,菜单名称以及菜单是否可用。
2、跳转到页面的同时又保存数据
比如:点击 增加菜单按钮 的时候,一方面要跳转到 增加菜单的页面,一方面当用户提交的时候进行数据的保存。(ps:相当于添加菜单的时候要用到controller中的两个方法,一个是跳转页面,一个是保存数据)
@RequestMapping("toAddMenu")
public String addMenu(HttpServletRequest request) {
List<MenuPo> menus = menuService.getMenus();
request.setAttribute("menus", menus);
return "admin-menu-add";
}
@RequestMapping("addMenu")
@ResponseBody
public ResultPo addMenu(HttpServletRequest request, MenuPo menu) {
MenuPo r = menuService.add(menu);
if (r == null) {
return ResultPo.create(ErrorCode.PARAMS_ERROR, "save menu error");
}
return ResultPo.create();
}
对应前端代码
<div>
<span class="l"><a href="javascript:;" onclick="admin_menu_add('添加菜单','<%=path%>/menu/toAddMenu','800')">添加菜单</a>
</span>
</div>
点击添加菜单,调用toAddMenu()方法,跳转到添加菜单的页面,点击“确定”,保存菜单的信息。
<div>
<button type="submit" class="btn btn-success radius" id="admin-menu-save" name="admin-menu-save" onclick="addMenu()"><i class="icon-ok"></i> 确定</button>
</div>
利用ajax,调用addMenu()方法,将前台数据传到后台,并保存到数据库中,这个在前边博客中介绍过了。
<script>
function addMenu() {
let roleName = $('#roleName').val();
let use = $("#use").select().val();
let postData = {};
postData["name"] = roleName;
postData["use"] = use;
$.ajax({
url: '<%=path%>/menu/addMenu',
type: 'post',
data: postData,
dataType: 'json',
async: true,
success: function (data) {
if (data.code == 200) {
layer_close();
layer.alert("添加成功");
window.location.replace(location.href);
}
layer.closeAll();
}
})
}
</script>