SSM整合_年輕人的第一個增刪改查_新增

蔚然丶丶發表於2022-04-13

寫在前面

SSM整合_年輕人的第一個增刪改查_基礎環境搭建
 SSM整合_年輕人的第一個增刪改查_查詢
 SSM整合_年輕人的第一個增刪改查_新增
 SSM整合_年輕人的第一個增刪改查_修改
 SSM整合_年輕人的第一個增刪改查_刪除
GitHub：https://github.com/say-hey/ssm_crud
Gitee：https://gitee.com/say-hey/ssm_crud

有用嗎？對於學完Spring、SpringMVC、Mybatis還無從下手的同學來說這是一個很好引子。對於正在學習同一個案例的同學，可能解決一些問題。對於需要這個案例的同學可以直接獲取。

有什麼？：xml配置檔案編寫，引入一個簡單的前端框架，使用MyBatis Generator逆向工程生成一些程式碼，使用框架簡單快速搭建一個頁面，好用的分頁工具PageHelper，簡單的前後端分離，傳送ajax請求，利用json傳遞資料，增、刪、改、查的簡單實現。

簡單嗎？內容很簡單，涉及Java程式碼不多，但是對於新手來說，最困難的部分是各種環境搭建、配置檔案、版本衝突，如果能夠根據錯誤提示動手解決，那就是一大進步。

怎麼學？如果有時間可以在B站搜尋：ssm整合crud，雷豐陽講的。如果想看到每個功能的實現過程和原始碼，可以在這裡學習，每個步驟都有註釋。也可以作為複習快速瀏覽。

3、新增

前端格式校驗、使用者名稱校驗、後端校驗、JSR303校驗，效果如圖

1. 員工新增模態框

使用彈出模態框作為新增模組，參考Bootstrap程式碼

在index.jsp新增新增模態框程式碼

    <!-- 為新增按鈕增加模態框 ，利用按鈕繫結單擊事件-->
    <!-- Modal -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">員工新增</h4>
                </div>
                <div class="modal-body">
                    <!-- 新增表單 -->
                    <form class="form-horizontal" id="model-form">
                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName_add_input"
                                       placeholder="empName">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 郵箱 -->
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" id="email_add_input"
                                       placeholder="empName@123.com">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 性別 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <!-- 單選 -->
                                <label for="gender1_add_input"> <input type="radio"
                                                                       name="gender" id="gender1_add_input"
                                                                       name="gender" value="M" checked>
                                    男
                                </label>
                                <label for="gender2_add_input"> <input type="radio"
                                                                       name="gender" id="gender2_add_input"
                                                                       name="gender" value="F">
                                    女
                                </label>
                            </div>
                        </div>
                        <!-- 部門下拉框 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-10">
                                <!-- 部門下拉選單使用ajax查詢出來的動態拼接，值為部門id --> 
                                <select class="form-control" name="dId" id="deptName_add_select"></select>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">儲存</button>
                </div>
            </div>
        </div>
    </div>

繫結單擊事件

    //新增模態欄
    $("#emp_add_modal_btn").click(function() {
		//顯示模態框
        $("#empAddModal").modal({
            //模態框引數，點選背景不關閉
            backdrop : "static"
        });
    });

查詢部門動態拼接

建立一個查詢部門的方法

    //新增模態框
    $("#emp_add_modal_btn").click(function() {
        //新增模態欄之前將所表單資訊清空，包括兩項驗證的css樣式，顯示模態欄之後就是空的
        //reset()方法是dom下的，使用[0]
        $("#empAddModal form")[0].reset();
        //清空輸入格式、重名校驗的css樣式
        reset_form("#empAddModal form");
        //獲取所有部門資訊
        getDepts("#deptName_add_select");
        //新增模態框，在模態框中需要所有部門，所以需要查詢所有部門資訊
        $("#empAddModal").modal({
         //模態框引數，點選背景不關閉
            backdrop : "static"
     });
    });
  	//後面用
    //新增模態框--清除表單資料，樣式
    function reset_form(ele) {
        $(ele)[0].reset();
        //該元素下所有css清除
        $(ele).find("*").removeClass("has-error has-success");
        //顯示警告資訊部分清空
        $(ele).find(".help-block").text("");
    }

傳送查詢部門的ajax請求

    //新增模態框--請求所有部門資訊
 function getDepts(ele){

     //---注意這裡要清空---
        $(ele).empty();
        $.ajax({
            url:"${PATH}/depts",
            type:"GET",
            success:function(result){
                //console.log(result);
                //動態拼接
            }
        });
    }

建立DepartmentController

package com.ssm.controller;

import com.ssm.bean.Department;
import com.ssm.bean.Msg;
import com.ssm.service.DepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * 部門資訊
 */
@Controller
public class DepartmentController {

    @Autowired
 private DepartmentService departmentService;

 /**
     * 獲取所有部門資訊
     * @return
     */
    @ResponseBody
    @RequestMapping("/depts")
    public Msg getDepts() {
        List<Department> depts = departmentService.getDepts();
        return Msg.success().add("depts", depts);
    }
}

建立DepartmentService

package com.ssm.service;

import com.ssm.bean.Department;
import com.ssm.dao.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 部門資訊
 */
@Service
public class DepartmentService {

    @Autowired
 DepartmentMapper departmentMapper;

    /**
     * 查詢所有部門
     */
    public List<Department> getDepts(){
        //方法本身可以新增查詢條件，如果為null代表查所有
        List<Department> list = departmentMapper.selectByExample(null);
        return list;
    }
}

動態拼接

    //新增模態框--請求所有部門資訊
    function getDepts(ele){

        //---注意這裡要清空---
        $(ele).empty();
        $.ajax({
        url:"${PATH}/depts",
        type:"GET",
            success:function(result){
                //console.log(result);
                $.each(result.extend.depts,function(index,item){
                    //建立出option並新增到select中
                    var optionEle = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                    optionEle.appendTo(ele);
                });
            }
        });
    }

效果

2. 基本員工新增

繫結儲存按鈕

    //------------------增刪改查都使用REST風格-------------------
    //新增儲存資訊 
    $("#emp_save_btn").click(function(){
        //1、模態框中填寫的表單資料提交給伺服器進行儲存
        //2、傳送ajax請求儲存員工
        $.ajax({
            url:"${PATH}/saveemp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            //.serialize()方法能將表單中資料序列化，直接傳送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success:function(result){
                //1.新增成功，關閉模態框
                $("#empAddModal").modal("hide");
                //2.來到最後一頁，顯示插入的資料，可以直接跳到一個很大的頁數，因為
                //合理性，所以不會超出，這裡使用全域性引數，資料總條數
                to_page(totalRecord+1);
            }
        });

EmployeeController

    @ResponseBody
    @RequestMapping(value = "/saveemp",method = RequestMethod.POST)
    public Msg saveEmp(Employee employee, BindingResult result) {
        employeeService.saveEmp(employee);
        return Msg.success();
    }

EmployeeService

    /**
     * 儲存emp員工，insert
     * @param employee
     */
    public void saveEmp(Employee employee) {
        //這個是有選擇插入，insert()全插入，包括id
        employeeMapper.insertSelective(employee);
    }

3. 前端校驗

一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，使用者名稱在後

（內部Java格式驗證）+ ajax使用者名稱驗證（實現方法看下一小節）

    //1.（內部Java格式驗證）+ ajax使用者名稱驗證
    //新增儲存資訊--ajax使用者名稱校驗
    //由於在java內又做了一次格式驗證，所以這個方法相當於即驗證了格式，又驗證了重名
    $("#empName_add_input").blur(function () {

        //傳送ajax請求，驗證使用者名稱是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "使用者名稱可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式衝突覆蓋，所以再加一次驗證
                    //自定義屬性，或全域性變數
                    //給新增按鈕新增自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");


                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);

                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

郵箱格式獨立校驗

    //2. 郵箱獨立驗證
    //新增儲存資訊--獨立郵箱格式驗證
    $("#email_add_input").blur(function () {
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            //return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最後方法通過
        //return true;
    })

格式+使用者名稱驗證+提交儲存請求

    //3. 格式+使用者名稱驗證+提交儲存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，
    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，使用者名稱在後
    //新增儲存資訊--請求
    $("#emp_save_btn").click(function () {
        //點選就傳送請求，儲存使用POST請求


        //1.先驗證ajax重名校驗，防止使用者輸入重複使用者名稱之後，直接輸入正確的郵箱，點選提交，重名的驗證提示會被覆蓋
        //ajax-vl是ajax重名校驗之後新增的自定義屬性，用於表示提交按鈕是否可用
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點選儲存按鈕請求之前完整驗證一遍輸入格式
        //JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單資料提交給伺服器進行儲存
        //2、傳送ajax請求儲存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中資料序列化，直接傳送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {
                //1.新增成功，關閉模態框
                $("#empAddModal").modal("hide");
                //2.來到最後一頁，顯示插入的資料，可以直接跳到一個很大的頁數，因為
                //合理性，所以不會超出，這裡使用全域性引數，引數值在上面分頁時獲取的，資料總條數+1保證不出現極端情況
                to_page(totalRecord + 1);
            }
        });
    });

請求按鈕JQuery格式總校驗方法

    //新增儲存資訊--請求按鈕JQuery格式總校驗方法
    function validate_add_form() {
        console.log("validate_add_form()")
        //1.拿到校驗的資料，使用正規表示式
        //根據bootstrap提供的元件
        //校驗使用者名稱
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            //alert("使用者名稱可以是2-5位中文或者2-8位英文和數字的組合");
            show_validate_msg("#empName_add_input", "error", "使用者名稱可以是2-5位中文或者2-8位英文和數字的組合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        //2、校驗郵箱資訊
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最後方法通過
        return true;
    }

新增樣式方法

    //新增儲存資訊--新增css樣式
    //show_validate_msg顯示校驗狀態，通過新增樣式，ele表示被選擇元素，status狀態
    //用來判斷是用什麼樣式，綠色、紅色，msg提示資訊
    function show_validate_msg(ele, status, msg) {
        //判斷之前先清空之前樣式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg)
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg)
        }
    }

4. ajax使用者名稱校驗

如果新增相同的使用者名稱會造成混淆，所以在輸入使用者名稱之後立即進行校驗

傳送ajax請求（與上一節相同）

    $("#empName_add_input").blur(function () {

        //傳送ajax請求，驗證使用者名稱是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "使用者名稱可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式衝突覆蓋，所以再加一次驗證
                    //自定義屬性，或全域性變數
                    //給新增按鈕新增自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");


                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);
                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

EmployeeController

    /**
     * 使用者名稱查重
     * 前端校驗，在失去焦點，儲存之前都校驗
     * @param empName
     * @return
     */
    @ResponseBody
    @RequestMapping("/checkname")
    public Msg checkEmpName(@RequestParam("empName")String empName) {

        //使用者名稱格式校驗
        String regx = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})";
        if(!empName.matches(regx)){
            return Msg.fail().add("msg", "使用者名稱可以是2-5位中文或者2-8位英文和數字的組合");
        }
        //返回查詢統計結果，true說明沒有重名
        boolean b = employeeService.checkEmpName(empName);
        if(b) {
            return Msg.success();
        }else {
            return Msg.fail().add("msg", "使用者名稱已存在");
        }
    }

EmployeeService

    /**
     * 查詢使用者是否存在
     * 使用Example複雜查詢
     *
     * @param name
     * @return
     */
    public boolean checkEmpName(String name) {
        //Example用法
        EmployeeExample example = new EmployeeExample();
        //建立查詢條件
        EmployeeExample.Criteria criteria = example.createCriteria();
        //我的理解：這一句相當於新增了一個條件 where empName=name
        criteria.andEmpNameEqualTo(name);
        //統計查詢結構
        long count = employeeMapper.countByExample(example);
        //返回true(0)說明沒有重複使用者名稱
        return count == 0;
    }

5. JSR303校驗

前面是前端校驗，現在是後端校驗，針對Java

新增JSR303依賴

		<!-- JSR303校驗 -->
		<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
		<dependency>
			<groupId>org.hibernate.validator</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>6.1.0.Final</version>
		</dependency>

在JavaBean上新增註解

public class Employee {
    private Integer empId;

    //JSR303自定義校驗規則
    @Pattern(regexp = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})", message = "使用者名稱可以是2-5位中文或者2-8位英文和數字的組合")
    private String empName;

    private String gender;

    @Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message = "郵箱格式不正確")
    private String email;
    
    //...

在Controller方法中使用，在引數前新增註解，在引數後面新增結果引數

    /**
     * 新增，儲存使用者,並驗證
     *
     * 新增JSR303校驗
     * @Valid表示校驗下一個物件
     * BindingResult緊跟被校驗物件，接收結果
     *
     * @param employee
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/saveemp",method = RequestMethod.POST)
    public Msg saveEmp(@Valid Employee employee, BindingResult result) {

        if(result.hasErrors()) {
            //格式校驗失敗，返回資訊
            Map<String ,Object> map = new HashMap<>();
            List<FieldError> fieldErrors = result.getFieldErrors();
            for(FieldError error : fieldErrors) {
                System.out.println("錯誤的欄位名:" + error.getField());
                System.out.println("錯誤資訊:" + error.getDefaultMessage());
                //將錯誤資訊放到map中
                map.put(error.getField(), error.getDefaultMessage());
            }
            return Msg.fail().add("errorFields", map);

        }else if(!employeeService.checkEmpName(employee.getEmpName())){
            //後端在儲存的時候再次驗證是否存在使用者名稱---有點 重複的感覺？？？
            //因為是在一起接收所以錯誤資訊一定要一樣，empName手動寫上
            return Msg.fail().add("empName", "使用者名稱已存在");
        }else {

            employeeService.saveEmp(employee);
            //不用這種：獲取總頁數，用在新增完之後跳轉到最後一頁，不過這樣就會多查一次資料庫
            //PageInfo<Employee> pageInfo = employeeService.getPage(null);
            //return Msg.success().add("pageInfo", pageInfo);
            return Msg.success();
        }
    }

在index.jsp提交按鈕中處理返回結果

    //3. 格式+使用者名稱驗證+提交儲存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，
    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，使用者名稱在後
    //新增儲存資訊--請求
    $("#emp_save_btn").click(function () {
        //點選就傳送請求，儲存使用POST請求

        //1.先驗證ajax重名校驗，防止使用者輸入重複使用者名稱之後，直接輸入正確的郵箱，點選提交，重名的驗證提示會被覆蓋
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點選儲存按鈕請求之前完整驗證一遍輸入格式
        console.log("JQuery格式總驗證")
        //方法一：JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        console.log("ajax重名校驗")
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單資料提交給伺服器進行儲存
        //2、傳送ajax請求儲存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中資料序列化，直接傳送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {

                //清除模態框和提示資訊
                $("#empAddModal form").find("*").removeClass("has-error has-success");
                $("#empAddModal form").find(".help-block").text("");

                //在這裡判斷後端JSR303校驗結果，最後一次！！！！！！！！！真的
                //前後端驗證可以獨立執行，註釋前端後端也能實現一樣效果
                if(result.code == 2333){

                    //alert(result.msg);
                    //1.新增成功，關閉模態框
                    $("#empAddModal").modal("hide");
                    //2.來到最後一頁，顯示插入的資料，可以直接跳到一個很大的頁數，因為
                    //合理性，所以不會超出，這裡使用全域性引數，資料總條數+1保證不出現極端情況
                    to_page(totalRecord + 1);
                }else{
                    //失敗，顯示資訊，有幾個就顯示幾個
                    //undefined 就是沒找到這個錯誤，說明正確，可用alert(result.extend.errorFields.empName)驗證
                    //使用者名稱格式
                    //alert(result.extend.errorFields.empName)

                    //使用者名稱格式和查重，因為查重的屬性格式和格式驗證不同，所以不能分開
                    //result.extend.errorFields.empName 格式驗證
                    //result.extend.empName 查重驗證
                    if(undefined != result.extend.errorFields ){
                        //格式錯誤
                        if(undefined != result.extend.errorFields.empName){
                            show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
                        }
                    }else{
                        if(undefined != result.extend.empName){
                            //查重錯誤
                            show_validate_msg("#empName_add_input","error",result.extend.empName);
                        }
                    }
                    //郵箱格式判斷
                    if(undefined != result.extend.errorFields){
                        if(undefined != result.extend.errorFields.email){
                            show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                        }
                    }
                }
            }
        });
    });

6. 完整程式碼

模態框

    <!-- 為新增按鈕增加模態框 ，利用按鈕繫結單擊事件-->
    <!-- Modal -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">員工新增</h4>
                </div>
                <div class="modal-body">
                    <!-- 新增表單 -->
                    <form class="form-horizontal" id="model-form">
                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName_add_input"
                                       placeholder="empName">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 郵箱 -->
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" id="email_add_input"
                                       placeholder="empName@123.com">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 性別 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <!-- 單選 -->
                                <label for="gender1_add_input"> <input type="radio"
                                                                       name="gender" id="gender1_add_input"
                                                                       name="gender" value="M" checked>
                                    男
                                </label>
                                <label for="gender2_add_input"> <input type="radio"
                                                                       name="gender" id="gender2_add_input"
                                                                       name="gender" value="F">
                                    女
                                </label>
                            </div>
                        </div>
                        <!-- 部門下拉框 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-10">
                                <!-- 部門下拉選單使用ajax查詢出來的動態拼接，值為部門id -->
                                <select class="form-control" name="dId" id="deptName_add_select"></select>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">儲存</button>
                </div>
            </div>
        </div>
    </div>

請求和方法

<script type="text/javascript">
    //------------------增刪改查都使用REST風格-------------------

    //1.（內部Java格式驗證）+ ajax使用者名稱驗證
    //新增儲存資訊--ajax使用者名稱校驗
    //由於在java內又做了一次格式驗證，所以這個方法相當於即驗證了格式，又驗證了重名
    $("#empName_add_input").blur(function () {

        //傳送ajax請求，驗證使用者名稱是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "使用者名稱可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式衝突覆蓋，所以再加一次驗證
                    //自定義屬性，或全域性變數
                    //給新增按鈕新增自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");

                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);
                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

    //2. 郵箱獨立驗證
    //新增儲存資訊--獨立郵箱格式驗證
    $("#email_add_input").blur(function () {
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            //return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最後方法通過
        //return true;
    })

    //3. 格式+使用者名稱驗證+提交儲存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，
    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，使用者名稱在後
    //新增儲存資訊--請求
    $("#emp_save_btn").click(function () {
        //點選就傳送請求，儲存使用POST請求

        //1.先驗證ajax重名校驗，防止使用者輸入重複使用者名稱之後，直接輸入正確的郵箱，點選提交，重名的驗證提示會被覆蓋
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點選儲存按鈕請求之前完整驗證一遍輸入格式
        console.log("JQuery格式總驗證")
        //方法一：JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        console.log("ajax重名校驗")
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單資料提交給伺服器進行儲存
        //2、傳送ajax請求儲存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中資料序列化，直接傳送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {

                //清除模態框和提示資訊
                $("#empAddModal form").find("*").removeClass("has-error has-success");
                $("#empAddModal form").find(".help-block").text("");

                //在這裡判斷後端JSR303校驗結果，最後一次！！！！！！！！！真的
                //前後端驗證可以獨立執行，註釋前端後端也能實現一樣效果
                if(result.code == 2333){

                    //alert(result.msg);
                    //1.新增成功，關閉模態框
                    $("#empAddModal").modal("hide");
                    //2.來到最後一頁，顯示插入的資料，可以直接跳到一個很大的頁數，因為
                    //合理性，所以不會超出，這裡使用全域性引數，資料總條數+1保證不出現極端情況
                    to_page(totalRecord + 1);
                }else{
                    //失敗，顯示資訊，有幾個就顯示幾個
                    //undefined 就是沒找到這個錯誤，說明正確，可用alert(result.extend.errorFields.empName)驗證
                    //使用者名稱格式
                    //alert(result.extend.errorFields.empName)

                    //使用者名稱格式和查重，因為查重的屬性格式和格式驗證不同，所以不能分開
                    //result.extend.errorFields.empName 格式驗證
                    //result.extend.empName 查重驗證
                    if(undefined != result.extend.errorFields ){
                        //格式錯誤
                        if(undefined != result.extend.errorFields.empName){
                            show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
                        }
                    }else{
                        if(undefined != result.extend.empName){
                            //查重錯誤
                            show_validate_msg("#empName_add_input","error",result.extend.empName);
                        }
                    }
                    //郵箱格式判斷
                    if(undefined != result.extend.errorFields){
                        if(undefined != result.extend.errorFields.email){
                            show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                        }
                    }
                }
            }
        });
    });

    //新增儲存資訊--請求按鈕JQuery格式總校驗方法
    function validate_add_form() {
        console.log("validate_add_form()")
        //1.拿到校驗的資料，使用正規表示式
        //根據bootstrap提供的元件
        //校驗使用者名稱
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            //alert("使用者名稱可以是2-5位中文或者2-8位英文和數字的組合");
            show_validate_msg("#empName_add_input", "error", "使用者名稱可以是2-5位中文或者2-8位英文和數字的組合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        //2、校驗郵箱資訊
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最後方法通過
        return true;
    }

    //新增儲存資訊--新增css樣式
    //show_validate_msg顯示校驗狀態，通過新增樣式，ele表示被選擇元素，status狀態
    //用來判斷是用什麼樣式，綠色、紅色，msg提示資訊
    function show_validate_msg(ele, status, msg) {
        //判斷之前先清空之前樣式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg)
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg)
        }
    }
</script>

SSM整合_年輕人的第一個增刪改查_查詢
2022-04-13
SSM
SSM整合_年輕人的第一個增刪改查_基礎環境搭建
2022-04-12
SSM
layui+ssm簡單增刪改查
2019-08-07
UISSM
第一個mybatis程式，實現增刪改查CRUD
2023-05-05
MyBatis
增刪改查
2024-03-23
列表的增刪改查
2018-07-31
字典的增刪改查
2018-08-01
layui的增刪改查
2019-07-10
UI
mybatis的增刪改查
2024-12-05
MyBatis
redist的增刪改查
2020-12-29
Redis
springboot整合mybatis增刪改查（三）：mybatis逆向工程
2019-01-29
Spring BootMyBatis
SQL增刪改查
2018-08-21
SQL
Mongoose查增改刪
2023-12-02
Go
indexedDB 增刪改查
2020-07-13
Index
mysql增刪改查
2020-10-18
MySql
SSM-員工管理專案實戰-CRUD-增刪改查
2021-03-28
SSM
Day28SSM之CRUD開發版本2的部門增刪改查
2020-10-19
SSM
mongodb 基本增刪改查
2024-04-03
MongoDB
MongoDB增刪改查操作
2020-10-22
MongoDB
單表增刪改查
2024-12-03
EFCore之增刪改查
2021-05-24
sql指令，增，刪，查，改
2021-04-28
SQL
mysql基本增刪改查
2020-12-15
MySql
02-CoreData 的增刪改查
2019-01-02
cobra.Command的增刪改查
2024-07-10
Tree樹狀圖的動態增刪查改（中）新增節點
2019-07-08
iOS CoreData (一) 增刪改查
2018-12-06
iOS
Jfinal+layui增刪改查
2018-04-12
UI
SQL 基礎增、刪、改、查
2018-08-22
SQL
elasticsearch7.2增刪改查
2020-06-03
Elasticsearch
[express+mongoose](增刪改查)
2020-11-20
ExpressGo
CoreData - 簡單增刪改查
2018-12-23
C# SqlSugar增刪改查
2024-10-09
C#SqlSugar
rust sqlx 使用---增刪改查
2022-07-27
RustSQL
PHP操作MongoDB（增刪改查）
2021-11-23
PHPMongoDB
JavaWeb中jdbc增刪查改
2021-11-02
JavaWebJDBC
寫一個簡單的Linkedlist，實現增刪改查
2018-11-22
js實現表格的增刪改查
2019-04-12
JS