Write the modal box to add employee information in jsp file

    <!-- Modal -->
    <div class="modal fade" id="myModal" 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">staff-increase</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="add_emp_Name" class="col-sm-2 control-label">Full name</label>
                            <div class="col-sm-6">
                                <input type="text" name="empName" class="form-control" id="add_emp_Name" placeholder="Please enter your name."/>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add_emp_Email" class="col-sm-2 control-label">email</label>
                            <div class="col-sm-6">
                                <input type="email" name="email" class="form-control" id="add_emp_Email" placeholder="Please enter your mailbox">
                                <span class="help-block"></span>
                            </div>
                        </div>

                        <!--Inline radio button-->
                        <div class="form-group">
                          <label for="add_emp_Email" class="col-sm-2 control-label">Gender</label>
                          <div class="col-sm-8">
                            <label class="radio-inline col-sm-2">
                                <input type="radio" name="gender" id="add_emp_gender1" value="M" checked="checked"> male
                            </label>
                            <label class="radio-inline col-sm-2">
                                <input type="radio" name="gender" id="add_emp_gender2" value="F"> female
                            </label>
                          </div>
                        </div>

                        <div class="form-group">
                            <label for="add_emp_Email" class="col-sm-2 control-label">department</label>
                            <div class="col-sm-4">
                                <select class="form-control col-sm-4" name="dId">

                                 </select>
                            </div>
                        </div>
                </form>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="add_button">increase</button>
                </div>
            </div>
        </div>
    </div>
    <!--modal End-->

Use ajax to transfer departmental information into the modal box.

service Layer Method of Department

    @Autowired
    DepartmentMapper departmentMapper;

    public List<Department> getDept() {
        List<Department> departments = departmentMapper.selectByExample(null);
        return departments;
    }

The Controller Layer Method of Department

 @Autowired
    DepartmentService departmentService;
    
    //Return json data for department
    @RequestMapping("/depts")
    @ResponseBody
    public Msg getDepts () {
        List<Department> dept = departmentService.getDept();
        return Msg.success().add("dept",dept);
    }

ajax requests sent by js

    $('#add_emp').click(function () {
        //Load departmental information before opening the static box
        getDepts()
        //Pop-up static box
        $('#myModal').modal({
            backdrop : 'static'
        })
    })

 function getDepts() {
            $.ajax({
                url:'${APP_PATH}/depts',
                type:'GET',
                success:function (result) {
                    console.log(result);
                    //Traverse department data, add json data to option, and add option attribute to select tag
                    $.each(result.extend.dept,function () {
                        var optionEle = $('<option></option>')
                            .append(this.deptName)
                            .attr('value',this.deptId)
                            .appendTo($('#myModal select'));
                    })
                }
            })
    }

Add the Service and Controller methods for adding employees to the back end.

Service level

   public void addEmp(Employee employee) {
        //Selective insertion
        employeeMapper.insertSelective(employee);
    }

Controller layer

//Increase staff
    @RequestMapping(value = "/emp",method = RequestMethod.POST)
    @ResponseBody
    public Msg addEmp(Employee employee) {
        employeeService.addEmp(employee);
        return Msg.success();
    }

Use ajax to insert data into the database, close the modal box and turn the page to the last page that inserts data after adding it.

  //ajax for Increasing Employees
    $('#add_button').click(function () {
        //Serialization of json data
      	//console.log($('#myModal form').serialize());
        //Parsing the added data with ajax
        $.ajax({
            url:"${APP_PATH}/emp",
            type:"POST",
            data:$('#myModal form').serialize(),
            success:function (result) {
                //alert(result.message)
                //Deal with the following requirements after successful operation:
                //1. Close the static module box
                $('#myModal').modal('hide');
                //2. Page to the last page to insert data
                //Pass in the total number of records and go to the last page as long as it is larger than the total number of pages.
                to_Page(total_page);
            }
        });
    })

Verify the information to be entered.

Add the following on the # add_button button.

//Check the input data format before submitting the data to the server
        if(!invalid_form()) {
            //If invalid_form() method does not return true, it returns false.
            return false;
        }

Validation information, the input empName and Email for regular expression judgment.

The method of adding style is proposed here, which can simplify the coding.

   //Verify that the employee's name and mailbox are in the correct format
        function invalid_form() {
            var empName = $('#add_emp_Name').val();
            //Regular expressions - > 6-16-bit English and numeric or 2-5-bit Chinese
            var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            //Determine whether it is the same, if not the same prompt
            if(!regName.test(empName)) {
                   show_invalid('#add_emp_Name','error','Name from 6-16 Bit English and Number Composition or 2-5 Bit Chinese Composition');
                 //  alert("incorrect format")
                   return false;
            }else{
               show_invalid('#add_emp_Name','success','')
            };
            //Test mailbox format
            var empEmail = $('#add_emp_Email').val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(empEmail)) {
                show_invalid('#add_emp_Email','error','The mailbox format is incorrect!');
                return false;
            }else{
                show_invalid('#add_emp_Email','success','')
            }
            return true;
        }

        //Styles for displaying checked information
        function show_invalid(id,status,info) {
            //Clear the css style where the check is located when it is needed
            $(id).parent().removeClass('has-error has-success')
            if('error' == status) {
                $(id).parent().addClass('has-error');
                $(id).next("span").text(info);
            }else if('success' == status) {
                $(id).parent().addClass('has-success');
                $(id).next("span").text("");
            }
      }

Today is the last day of March. Every day, take good care of yourself and treat the people you like and your relatives sincerely. That's enough.
April, please be kind to me.