编写SSH选课系统记录——普通表格实现学生退课（ajax跳转页面、onclick传递多个参数、模态框等问题）

由于学生选课数量不多，我就不用bootstrap-table去显示其列表了。就用普通的bootstrap表格实现。

也就是平常使用的td和th标签。

首先从后端获取到Course对象的List集合，在前端使用ognl表达式接收。就不用多描述了。

构建表格的前端代码如下：

		<table class="table table-hover">

			<tr>
				<th>课程号</th>
				<th>课程名</th>
				<th>课程类型</th>
				<th>所属学院</th>
				<th>时间</th>
				<th>教师</th>
				<th>学分</th>
				<th>地点</th>
				<th>操作</th>
			</tr>

			<s:iterator var="course" value="CourseSel">
				<tr>
					<td><s:property value="#course.cid" /></td>
					<td><s:property value="#course.cname" /></td>
					<td><s:property value="#course.ctype" /></td>
					<td><s:property value="#course.cacademy" /></td>
					<td><s:property value="#course.ctime" /></td>
					<td><s:property value="#course.tname" /></td>
					<td><s:property value="#course.ccredit" /></td>
					<td><s:property value="#course.clocation" /></td>

					<td ><a href='javascript:void(0)' onclick='tuixuan("<s:property value="#course.cid" />"
					,"<s:property value="#course.cname"/>")'>退选 </a></td>
				
				</tr>
			</s:iterator>
		</table>

由于我们需要利用ajax将课程id传到后端，并且需要在警告模态框中显示该课程的名称，上述代码中的onclick函数传递了两个参数：课程编号和课程名称，可供js方法使用。需要注意的是：如何传递的参数为中文，则需要在其外部加上引号，不然会作为变量名自动解析。

然后编写xuanke方法，关于模态框的操作方法我会在另外的博客说明，其实很好上手也不用多说明，需要实现的是：若成功退选，则显示成功操作的模态框，然后刷新本页面。一开始我的代码是这样的：

function tuixuan(cid,cname){
           console.log(cid);
           console.log(cname);
            //显示警告模态框
            $("#alertModal").modal('show');  
            $("#warningText").text("是否退选课程：" +cname+ " ?");    
            //点击确认按钮
            $("#confirmBtn").on("click",function(){
                 var cid={'cid':cid};
             $.ajax({
                url:'withdrawalCourse',
                type:'post',
                data:cid,
                dataType:"json",
                success:function(data){
                console.log(data);                      
                 if(data=="success"){
                   //隐藏当前的模态框
                  $("#alertModal").modal('toggle');
                  $("#SuccessModal").modal('show');
                  window.location.href="myCourseList";    
            }else{
                  $("#alertModal").modal('toggle');
                  $("#FailedModal").modal();
            }
                }
            });
      })            
   }

结果是：成功操作的模态框未显示前，页面就进行了跳转刷新。于是我想起了应该添加一个当模态框隐去后的函数，将跳转操作放在里面。
修改后的代码：

function tuixuan(cid,cname){
           console.log(cid);
           console.log(cname);
            //显示警告模态框
            $("#alertModal").modal('show');  
            $("#warningText").text("是否退选课程：" +cname+ " ?");    
            //点击确认按钮
            $("#confirmBtn").on("click",function(){
                 var cid={'cid':cid};
             $.ajax({
                url:'withdrawalCourse',
                type:'post',
                data:cid,
                dataType:"json",
                success:function(data){
                console.log(data);                      
                 if(data=="success"){
                   //隐藏当前的模态框
                  $("#alertModal").modal('toggle');
                  $("#SuccessModal").modal('show');
                  $('#SuccessModal').on('hidden.bs.modal', function (e) {
                      window.location.href="myCourseList";
                   }); 
            }else{
                  $("#alertModal").modal('toggle');
                  $("#FailedModal").modal();
               }
             }
            });    
           })         
   }

不，又发现一个问题，function的子函数无法获得父函数参数。

function tuixuan(id,cname){
           console.log(id);
           var cid1=id;
           console.log(cname);
            //显示警告模态框
            $("#alertModal").modal('show');  
            $("#warningText").text("是否退选课程：" +cname+ " ?");    
            //点击确认按钮
            $("#confirmBtn").on("click",function(){
                 var cid={'cid':cid1};
                 console.log(cid);
             $.ajax({
                url:'withdrawalCourse',
                type:'post',
                data:cid,
                dataType:"json",
               
                success:function(data){
                console.log(data);                      
                 if(data=="success"){
                   //隐藏当前的模态框
                  $("#alertModal").modal('toggle');
                  $("#SuccessModal").modal('show');
                  $('#SuccessModal').on('hidden.bs.modal', function (e) {
                      window.location.href="myCourseList";
                   }); 
            }else{
                  $("#alertModal").modal('toggle');
                  $("#FailedModal").modal();
            }
                }
            });   
          })          
   }