SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）

      前端新增页面的模态框，采用bootstarp建立。定义了empName，email，gender，depatName，四个属性的ID；其中保存按钮的ID：emp_save_btn,对应的点击函数如下： 

$("#emp_save_btn").click(function() {
            //1.模态框的表单数据提交给服务器进行保存
            //先对要提交给服务器的数据进行校验
            if (!validate_add_form()) {
                  return false;
            };
            //判断用户名是否成功
            if ($(this).attr("ajax-va") == "error") {
                return false;
            }
            //2.发送ajax请求保存员工,serialize表示序列化方法,将填入数据序列化
            //$("#empAddmodal form").serialize();
            //添加数据后，跳转到最后一页
            $.ajax({
                url : "${APP_PATH}/emp",
                type : "POST",
                data : $("#empAddmodal form").serialize(),
                success : function(result) {
                    //alert(result.msg);
                    //当员工保存工作
                    //1.关闭模态框
                    $("#empAddmodal").modal('hide');
                    //2.来到最后一页，显示刚才保存的数据
                    //发送ajax请求显示最后一页数据即可,总记录数肯定大于页数
                    to_page(totalRecord);
                }
            });

        });

 步骤是 模态框的表单数据提交给服务器进行保存，所以先对要提交给服务器的数据进行校验，采用方法为validate_add_form()，然后判断用户名是否已经存在。

调用ajax方法，发出emp请求（转到controller层），POST方式，将填入的数据序列化，成功就保存数据，跳转到最后一页显示添加的数据

       validate_add_form方法先拿到要检验的数据采用正则表达式确定是否符合输入要求，如果符合要求，调用show_validate_msg方法，代码如下：

//校验表单数据function validate_add_form() {//1.拿到要校验的数据，使用正则表达式var empName = $("#empName_add").val();var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9fff]{2,5})/;if (!regName.test(empName)) {//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");//bootstrap校验，给父标签加上has-error// $(ele).parent().addClass("has-error");// $(ele).next("span").text(msg);show_validate_msg("#empName_add","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");

return flase;
}else{

show_validate_msg("#empName_add","success","");}

 

       show_validate_msg，有三个参数，第一个为标签ID，第二个为状态，第三个显示文本。

 1 //显示校验结果的提示信息，抽象成方法
 2         function show_validate_msg(ele,status,msg){
 3             //清除当前元素的校验状态
 4              $(ele).parent().removeClass("has-success has-error");
 5              $(ele).next("span").text("");
 6              
 7             if("success"==status)
 8             {
 9                  $(ele).parent().addClass("has-success");
10                  $(ele).next("span").text(msg);
11             }else if("error"==status)
12             {
13                  $(ele).parent().addClass("has-error");
14                  $(ele).next("span").text(msg);
15             }
16         }
17         

    注意的几个细节：

1.采用函数插入页面元素

1     $("<tr>tr>").append(empIdTd).append(empNameTd).append(
2                         GenderTd).append(EmailTd).append(deptNameTd).append(
3                         btnTd).appendTo("#emps_table tbody");

2.append方法执行完以后还是返回原来的元素

3.采用Response获得json字符串，然后页面解析字符串

4.跳转页面采用to_page方法，里面依次执行三个方法，解析并显示员工数据，解析并显示分页信息，显示分页信息

5.返回的json字符串

6.前端页面的ajax发出请求，controller收到请求，并得到参数，转到service层的方法，service层调用mapper.java中的方法。该方法是mapper,.xml的声明，是现在mapper.xml里。

 

      完整页面如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>





<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>








<%--   --%>
    href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    rel="stylesheet">

    aria-labelledby="myModalLabel">
   

       

           

                                    aria-label="Close">
                    ×
               
               

添加员工

           

           

               
               

                
                   

                        empName
                       

                                                            placeholder="empName" name="workerName">
                       
                       

                   

                   

                        email
                       

                                                            placeholder="email" name="workerEmail">
                           
                       

                   

                   

                        gender
                       

                                                        id="gender1_add" value="M" name="workerGender">
                                男
                                                         id="gender2_add" value="W" name="workerGender">
                                女
                           
                         

                   

                   

                        deptName
                       

                       
                             
                            
                           
                       

                   

                    
               

           

           


           

                关闭
                保存
           

       

   

   
   

       
       

           

               

SSM-CRUD

           

       

       
       

           

                新增
                删除
           

       

       
       

           

               
                   
                       
                           
                           
                           
                           
                           
                           
                       
                   
                   
                   




               

序号	Name	Gender	Email	deptName	操作