spring mvc中controller方法 前后端交互 书写思路

主要有两种形式，一种是直接跳转到某个页面，一种是保存数据。
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>