使用ajax新增员工js代码（index.jsp）

//    添加员工按钮
    $("#emp_add_modal_btn").click(function () {
        // 发送ajax请求，查询部门信息，以便显示在下拉列表中
        getDept();
        // 弹出模态框
        $("#empAddModal").modal({
            backdrop:'static'
        })
    });
    // 查询出部门信息显示在下拉列表中
    function getDept() {
        $.ajax({
            url: "/depts",
            data: "",
            type: "GET",
            success:function (data) {
                // console.log(data) // {"code":100,"msg":"处理成功","map":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
                $.each(data.map.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo("#dept_add_select");
                });
            }
        });
    }

    $("#emp_save_btn").click(function () {
        // 提交表单数据给服务器
        // 发送ajax请求保存员工
        $.ajax({
           url:"/emp",
           type:"POST",
           // 请求数据 是表单每一项具体输入信息，使用serialize
           data:$("#add_form").serialize(),
            success:function (data) {
                // 关闭模态框
                $("#empAddModal").modal('hide');
                // 发送ajax前往最有一页查询插入的内容,总记录数肯定比总页码大
                to_page(totalResult);
            }
        });
    });
</script>

级联下拉列表查询控制层DepartmentController代码

/**
     * 返回查询出的所有部门信息的json字符串给浏览器
     * @return
     */
    @RequestMapping("/depts")
    @ResponseBody
    public JsonMsg getDepts(){
        System.out.println("向服务器发送了一次ajax请求");

        List<Department> list = departmentService.queryDepts();
        System.out.println(list);
        return JsonMsg.success().add("depts",list);
    }

EmployeeService

public void saveEmp(Employee employee) {
        employeeMapper.insertSelective(employee);
    }

模态框代码

<!-- 员工添加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 id="add_form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">员工姓名</label>
            <div class="col-sm-10">
                <input name="empName" type="text" class="form-control" id="empName_add_input" placeholder="empName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">员工邮箱</label>
            <div class="col-sm-10">
                <input name="email" type="email" class="form-control" id="email_add_input" placeholder="email">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" id="gender0_add_input" value="F"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">企业部门</label>
            <div class="col-sm-4">
<%--                部门提交部门id即可--%>
                <select name="dId" class="form-control" id="dept_add_select">

                </select>
            </div>
        </div>
    </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="emp_save_btn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>