SSM学生选课管理系统项目中问题总结(未完待续)

前端遇到的问题

一、ajax的注意事项

var showAll = function(aid) {
   
	console.log(aid)
		$.ajax({
   
			url:"${ctx}/admin/showOneAdminUser",
			data:{
   "aid":aid},
			type:"get",
			success:function(response){
   
				$("#uname").val(response.uname);
				$("#upassword").val(response.upassword);
				$("#aname").val(response.aname);
				$("#aphone").val(response.aphone);
			}
		});	
	};

1. ajax中属性要小写（如：data）
2. 如果要在地址栏后拼接参数（如：admin/showOneAdminUser?1000），需要这样写data:{"aid":aid}

---

二、引入bootstrap的模态框

<!--模态框-->
	<form method="post" name="user" class="form-horizontal" role="form"
		id="form-data" style="margin: 20px;">
		//将id="updateModal"填入编辑按钮中触发模态框
		<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
			aria-labelledby="updateModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="updateModalLabel">用户信息</h4>
					</div>
					<div class="modal-body">
						<form action="" class="form-horizontal">
							<!--userid为隐藏的input，便于update时的传值-->
							<input type="text" id="userID" name="userID" hidden>
							<div class="form-group">
								<label for="username" class="col-sm-3 control-label">登录名</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="uname"
										name="uname" placeholder="用户名长度在5-18字符之间">
								</div>
							</div>
							<div class="form-group">
								<label for="password" class="col-sm-3 control-label">密码</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="upassword"
										name="upassword" placeholder="密码长度在5-20字符之间">
								</div>
							</div>
							<div class="form-group">
								<label for="phone" class="col-sm-3 control-label">姓名</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="aname" name="aname"
										placeholder="请输入真实姓名">
								</div>
							</div>
							<div class="form-group">
								<label for="email" class="col-sm-3 control-label">电话</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="aphone"
										name="aphone" placeholder="请输入手机号">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<!--type为submit时，会自动调用该表单的验证，但是不会调用自己定义的动态的username的验证，
                    所以把按钮类型改为input，再手动调用封装好的验证函数-->
						<button type="input" class="btn btn-primary" onclick="vali();">提交</button>
						<span id="tip"></span>
					</div>
				</div>
			</div>
		</div>
	</form>

2.1模态框样式：

• 触发编辑框（模态框）：在我的项目中触发条件是点击编辑按钮时
  
• 要想触发模态框，得在编辑按钮处添加data-toggle=“modal” data-target="#updateModal",关联上述模态框中第一个div的id值data-target="#updateModal

  <button class="btn btn-info" data-toggle="modal" data-target="#updateModal" type="button" onclick="showAll('${admin.aid}')">编辑</button>
  

---

三、bootstrap模态框共用

目的： 添加按钮和编辑按钮共用同一个模态框，如下图所示

1. 触发模态框条件，按钮中必须得有data-toggle="modal" data-target="#updateModal"这两个属性。注意： target中的值要填写你自己模态框中的id值。

2. 在添加按钮和编辑按钮处设置同一方法不同参数

3. 添加按钮：设置id=add

4. 编辑按钮：