Layui 实现录入功能

Layui之二级联动,动态获取数据库院系，二级联动获取专业，监听提交

使用Layui，页面需要引入的：

<link rel="stylesheet" href="../../css/layui.css" media="all">
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../layui.js" charset="utf-8"></script>

• 前端页面

 <div class="layui-input-block layui-form" id="addClass"
		lay-filter="addClass" style="margin-top: 30px"">
	<form class="layui-form" action="" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">年级</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="grade" id="grade"
						placeholder="例：2016" readonly="true">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">班级编号</label>
			<div class="layui-input-inline">
				<input type="text" name="classid" required lay-verify="required"
					placeholder="请输入班级编号" autocomplete="off" class="layui-input"
					id="classid">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">班级名称</label>
			<div class="layui-input-inline">
				<input type="text" name="classname" id="classname" required
					lay-verify="required" placeholder="请输入班级名称" autocomplete="off"
					class="layui-input">
			</div>
		<!-- 	<div class="layui-form-mid layui-word-aux">辅助文字</div> -->
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">院系</label>
			<div class="layui-input-inline">
				<select name="deptid" lay-verify="required" id="deptid"
					lay-filter="deptid">
					<option value="">请选择</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">专业</label>
			<div class="layui-input-inline">
				<select name="majorid" lay-verify="required" id="majorid"
					lay-filter="majorid">
					<option value="">请选择</option>
				</select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
 </div>

• JS

<script src="../../layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'laydate' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var $ = layui.$;
			
			//监听提交
			form.on('submit(formDemo)', function(data) {
				$.ajax({
					url : '../../ClassInsertServlet',
					dataType : 'json',
					data : {
						'classid' : $("#classid").val(),
						'classname' : $("#classname").val(),
						'majorid' : $("#majorid").val(),
						'grade' : $("#grade").val()
					},
					type : 'post',
					success : function(data) {
						if (data == 0) {
							layer.msg('录入失败！',{icon:5,offset:"auto",time:2000});//提示框
						}else  {
							layer.msg('录入成功！',{icon:6,offset:"auto",time:2000});//提示框
						}
						setTimeout(function(){
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);//关闭弹出层
							parent.location.reload();//重新加载父页面表格
						}, 2100);
					}
				});
				return false;
			});

			//获取院系
			$.ajax({
				url : '../../DeptFindAllServlet',
				dataType : 'json',
				data : {
					'state' : 0
				}, //查询状态为正常的所有机构类型
				type : 'post',
				success : function(data) {
					$.each(data, function(index, item) {
						$('#deptid').append(
								new Option(item.deptname, item.deptid));// 下拉菜单里添加元素
					});
					layui.form.render("select");
				}
			});

			//二级联动根据院系获取专业
			form.on('select(deptid)', function(data) {
				$.ajax({
					type : 'POST',
					url : '../../MajorFindAllServlet',
					data : {
						'deptid' : $("#deptid").val()
					},
					dataType : 'json',
					success : function(data) {
						//empty() 方法从被选元素移除所有内容
						$("select[name='majorid']").empty();
						var html = "<option value=''>请选择</option>";
						$("#majorid").append(html);
						$.each(data, function(index, item) {
							$("#majorid").append(
									new Option(item.majorname, item.majorid));
						});
						//重新刷新了一下下拉框
						form.render('select'); //重新渲染
					}
				});
			});
			
			//年选择器
			laydate.render({
				elem : '#grade',
				type : 'year'
			});

		})
	</script>