通过form表单提交数据和ajax提交数据

一、通过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">&#xe665;</i> 搜菜单节点
            </button>
</form>

标签：use,菜单,form,postData,addMenu,表单,ajax,提交
来源： https://blog.csdn.net/optimist_girl/article/details/113844124