The change search ajax based deletions maven + ssm check whether the user name is available

Js legitimacy of the use of a checking data, this section combined ajax request authentication user name is available, i.e., already exists.

First, we want the presence of the user query the database according to empName input:

EmployeeController.java

    // Check the user name is available 
    @ResponseBody
    @RequestMapping("/checkuser")
    public Msg checkUser(String empName) {
        boolean b = employeeService.checkUser(empName);
        if(b) {
            return Msg.success();
        }
        return Msg.fail();
    }

EmployeeService.java

    public boolean checkUser(String empName);

EmployeeServiceImpl.java

    @Override
    public boolean checkUser(String empName) {
        // TODO Auto-generated method stub
        EmployeeExample example = new EmployeeExample();
        Criteria criteria = example.createCriteria();
        criteria.andEmpNameEqualTo(empName);
        long count = employeeMapper.countByExample(example);
        return count == 0;
    }

add.js

// Click to add pop-up modal box 
$ ( "# emp_add_modal_btn" ) .click (function () {
         // send ajax request, to identify the department information display drop-down list 
        reset_form ( "# empAddModal form" );
        getDepts("#empAddModal select");
        $("#empAddModal").modal({
            backdrop:"static"
        });
    });
// clear the form and content style 
function reset_form (ele) {
    $ (it) [ 0 ] .Reset ();
    $(ele).find('*').removeClass("has-error has-success");
    $(ele).find(".help-block").text("");
}
// query all sectors of the information 
function getDepts (ele) {
        $ (He) .empty ();
        $.ajax({
            url:"/curd_ssm/depts",
            type:"GET",
            success:function(result){
                //console.log(result);
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo (ele);
                });
                
            }        
        });
    }

function show_validate_msg(ele,status,msg){
    // To clear the error message before, so even if the correct input, the input box is red 
    . $ (ELE) .parent () removeClass ( "Success has-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);
        }

}

function validate_add_form(){
    
    var empName = $("#empName_add_input").val();
    regname var = / (^ [A-zA-Z0-9 _-] {6,16} $) | (^ [\ u2E80- \ u9FFF] {2,5}) / ;
     IF (! regName.test (empName) ) {
         // Alert ( "username must be 6-16 or 2-5 English Chinese position");
         // $ ( "# empName_add_input") empty ();. 
        show_validate_msg ( "# empName_add_input", "error", "username must be 6-16 or 2-5 English Chinese position" );
         return  false ;
    }else{
        show_validate_msg("#empName_add_input","success","");
    }    
    var email = $("#email_add_input").val();
    regEmail var = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([az\.]{2,6})$/ ;
     IF ( ! regEmail.test (Email)) {
         // Alert ( "E-mail format is incorrect");
         // $ ( "# email_add_input") empty ();. 
        show_validate_msg ( "# email_add_input", "error", "E-mail format is not correct " );
         return  false ;
    }else{
        show_validate_msg("#email_add_input","success","");
    }    

    return true;
}

$("#empName_add_input").change(function(){
    //$("#empName_add_input").empty();
    var empName = this.value;
    $.ajax({
        url:"/curd_ssm/checkuser",
        data:"empName=" + empName,
        type:"POST",
        success:function(result){
            if(result.code == 100){
                show_validate_msg("#empName_add_input","success","用户名可用");
                $("#emp_save").attr("ajx-va","success");
            }else{
                show_validate_msg("#empName_add_input","error","用户名不可用");
                $("#emp_save").attr("ajx-va","error");
            }
        }        
    });
});

$("#emp_save").click(function(){
    //alert($("#empAddModal form").serialize());
    if(!validate_add_form()){
        return false;
    }
    if($(this).attr("ajx-va")=="error"){
        return false;
    }
    $.ajax({
        url:"/curd_ssm/emp",
        type:"POST",
        data:$("#empAddModal form").serialize(),
        success:function(result){        
            // Close the modal box, go to the last page 
            $ ( "# empName_add_input" ) .empty ();
            $("#email_add_input").empty();
            $("#empAddModal").modal('hide');
            to_page (total record);
            //alert(result.msg);
        }
    });
    
});

Red mark is our new, orange part of the need of our attention,

Because if not prohibit the use of the Save button at this time can still be saved, adding in this case "ajx-va" == error, after the judge at the time of submission, you can avoid this from happening. After the change correctly Username:

Click Save: