一、通过ajax提交数据
<div method="post" class="form form-horizontal" id="form-admin-role-add">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>菜单名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="roleName" name="roleName">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否使用:</label>
<div class="formControls col-xs-8 col-sm-9">
<span class="select-box inline">
<select id="use" class="select">
<option value="1">可以使用</option>
<option value="0">禁止使用</option>
</select>
</span>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<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>
</div>
</div>
比如菜单包括菜单id,菜单名称,是否启用该菜单,点击确定按钮的时候触发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>
addMenu()函数,没有参数,增加菜单的时候通过ajax进行提交,将添加的元素封装成postData对象进行传输,而这些元素是根据用户所填的信息得到的。
总的来说,保存菜单的时候,前端将所填菜单的信息通过ajax的方式传到后台addMenu()方法中,后台根据菜单的信息新增一条菜单的记录,并保存到数据库中。
二、通过form表单提交
根据菜单名称查询,采用form表单提交形式,会把表单中输入的数据一同传到后台searchMenus()方法中,后台方法根据前端的菜单名称查询符合的所有记录。
<form class="Huiform" method="get" action="<%=path%>/menu/searchMenus" target="_self">
<input type="text" class="input-text" style="width:250px" placeholder="菜单名称" id="menuName" name="menuName">
<button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont"></i> 搜菜单节点
</button>
</form>