사용자 정보입력 -사원번호,아이디 중복검사

사용자 정보입력 -사원번호,아이디 중복검사를 추가 

기존입력된 사원의 데이터

중복된 id와 사원번호 입력시 알럿창 발생

바꾼 id와 사원번호로 사용자입력

1. 사용자 입력 AJAX를 따로 분리

2. 사원번호와 아이디를 AJAX로 중복검사 

3. 사원번호와 아이디가 중복되지 않으면 사용자 정보입력 ㄱㄱ

※ 순서

1. 사원번호와 아이디를 중복검사를 위해 CONTROLLER로 보낸다.

2. CONTROLLER에서 받은 사원번호와 아이디를 각각의 IMP로 보냄

3. IMP에서 각각받은 사원번호화 아이디로 SELECT문을 실행

         (사원번호와 아이디로 SELECT문을 실행하고 결과는 VO에 담는다.)

4. 돌아온 결과값은 NULL처리 

    (결과값이 널이면 "널값" 으로 리턴)

5. CONTROLLER에서 받아온 값을 MAP에 담아 JS로 리턴 (@ResponseBody 에 의해 JSON 형태로 리턴됨)

6. 리턴된 갑을 SUCCESS에서 IF문을 사용해 ALERT과 사용자정보 입력을 구현

     (중복검사 AJAX에서async: false 을 해야 정상적으로 사용자 정보입력함수로 잘 감

저걸 안해주면은 입력은 되지만 AJAX와 폼리셋은 안됨)

※

 -eco_user.js
//사용자 입력
function userSubmit(){
     var params = $("#USER_insert").serialize(); // serialize() :입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.
     
     // 먼저 입력을 실행했을때 99줄에서 바꿔준 값을 그대로 가지고 있어서 초기화를 한번 해줘야함(11/02)
     $("#insert").attr("data-dismiss",""); 
     
        //정규식 체크 - 숫자체크
        var numberCh = /^[0-9]+$/;
        //정규식체크 - 한글,영문 체크
        var charCh = /^[가-힣a-zA-Z]+$/;
     
     
        if ($("#ENAME_user").val() == "") {
            alert("사원id를 입력하세요");
            $("#ENAME_user").focus();
        } else if ($("#ADDRESS_user").val() == "") {
            alert("자택정보를 입력하세요");
            $("#ADDRESS_user").focus();
        } else if ($("#NAME_user").val() == "") {
            alert("이름를 입력하세요");
            $("#NAME_user").focus();
        }
        else if ($("#DCODE_user").val() == "") {
            alert("사원번호를 입력하세요");
            $("#DCODE_user").focus();
        } else if ($("#DEPARTMENT_user").val() == "") {
            alert("부서를 입력하세요");
            $("#DEPARTMENT_user").focus();
        } else if ($("#POSITION_user").val() == "") {
            alert("직급를 입력하세요");
            $("#POSITION_user").focus();
        } else if ($("#BIRTHDAY_insert").val() == "") {
            alert("생일을 입력하세요");
            $("#BIRTHDAY_insert").focus();
        } else if ($("#BIREDAY_insert").val() == "") {
            alert("입사일 입력하세요");
            $("#BIREDAY_insert").focus();
        } else if ($("#PHONE_user").val() == "") {
            alert("전화번호를 입력하세요");
            $("#PHONE_user").focus();
        } else if ($("#EXNUM_user").val() == "") {
            alert("내선번호를 입력하세요");
            $("#EXNUM_user").focus();
        } else if ($("#EMAIL_user").val() == "") {
            alert("이메일를 입력하세요");
            $("#EMAIL_user").focus();
        } else if ($("#PRESENT_user").val() == "select") {
            alert("사원상태를 입력하세요");
            $("#PRESENT_user").focus();
        }else if(!charCh.test($("#NAME_user").val())){
            alert("문자입력 ㄱㄱ");
            $("#NAME_user").focus();
        }else if(!charCh.test($("#NAME_user").val())){
            alert("문자를 입력해주세요");
            $("#NAME_user").focus();
        }else if(!numberCh.test($("#DCODE_user").val())){
            alert("숫자를 입력해주세요");
            $("#DCODE_user").focus();
        }else{

            //1. 사원번호와 아이디를 중복검사를 위해 CONTROLLER로 보낸다.

            // 사원번호, 아이디 중복검사를 위해 값 추출
            var DCODE = $("#DCODE_user").val();
            var ENAME = $("#ENAME_user").val();
            
            
            $.ajax({                                
                url: '/library/ChackIdDcode.do',
                type: 'POST',
                data:{"DCODE":DCODE,"ENAME":ENAME},
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
                dataType: 'html',

             // 6. 리턴된 갑을 SUCCESS에서 IF문을 사용해 ALERT과 사용자정보 입력을 구현
               (중복검사 AJAX에서async: false  을 해야 정상적으로 사용자 정보입력함수로 잘 감
                 저걸 안해주면은 입력은 되지만 AJAX와 폼리셋은 안됨)

                async: false,
                success: function(data){
                    var dcode = JSON.parse(data).dcode;  //JSON.parse 를 이용해 DCODE의 VALUE값을 추출 (JSON.parse(data).dcode =>DATA의 키가 DCODE의 값 )
                    var ename = JSON.parse(data).ename;
                    
                    if(dcode!="널값" || ename!="널값"){
                        if(dcode!="널값"){
                            alert("존재하는 사원번호입니다 다시 입력헤주세요.");
                            $("#DCODE_user").focus();
                        }else if(ename!="널값"){
                            alert("존재하는 아이디입니다 다시 입력헤주세요.");
                            $("#ENAME_user").focus();
                        }
                    }else {
                        userInsertSubmit(params);  // 둘다 널이면 사용자정보입력 실행
                    }
                },error:function(request,status,error){
                  console.log("code:"+request.status+"\n"+"message:"
                          +request.responseText+"\n"+"error:"+error);
                alert("실패");
                }
            });
            
            
            
        }
}
 
function userInsertSubmit(params){
    console.log(params);
    $.ajax({                                
        url: '/library/user.do',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
        dataType: 'html',
        success: function(){
            //alert("성공");
            $("#list2").jqGrid({  // jqGrid 리로드
                         url : '/library/gridView.do', 
                         datatype : 'json'}).trigger("reloadGrid"); 
            
            // 사용자 입력 후 form reset
            $("#USER_insert").each(function(){
                this.reset();
            });
            
        },error:function(request,status,error){
          console.log("code:"+request.status+"\n"+"message:"
                  +request.responseText+"\n"+"error:"+error);
        //alert("실패");
        }
    });
    // 창을 닫기위해 속성을 변경
    $("#insert").attr("data-dismiss","modal"); 
}

- CONTROLLER 
   //사원id,사원번호 중복체크
    @SuppressWarnings("null") // 경고억제 애노테이션 , null 분석 관련 경고 억제
    @RequestMapping(value = "/ChackIdDcode.do", method = RequestMethod.POST)
    public @ResponseBody Map<String, Object> ChackIdDcode(Locale locale, Model model,EmployeeVO vo,
            @RequestParam String DCODE,@RequestParam String ENAME, HttpServletRequest req ) {
        System.out.println("중복체크"+DCODE+ENAME);
        Map<String, Object> map = new HashMap<>();

        //2. CONTROLLER에서 받은 사원번호와 아이디를 각각의 IMP로 보냄
        String dcode  = employeeServiceimp.ChackDcode(DCODE);
        String ename  = employeeServiceimp.ChackId(ENAME);
        

        System.out.println(dcode+"   ,   "+ename);

        //5. CONTROLLER에서 받아온 값을 MAP에 담아 JS로 리턴 (@ResponseBody 에 의해 JSON 형태로 리턴됨)
        map.put("dcode", dcode);
        map.put("ename", ename);
        
        System.out.println("map : "+map);
        
    
        
        return map;
    }
    

-EmployeeServiceimp.java

3. IMP에서 각각받은 사원번호화 아이디로 SELECT문을 실행         (사원번호와 아이디로 SELECT문을 실행하고 결과는 VO에 담는다.)4. 돌아온 결과값은 NULL처리     (결과값이 널이면 "널값" 으로 리턴)

public String ChackId(String ENAME) {
        //vo로받아서 map담아 보내자
        String ename = "";
        EmployeeVO vo = null;
        EcoLibraryMapper mapper = sqlsesstion.getMapper(EcoLibraryMapper.class);
        System.out.println("IMP 사원id "+ENAME);
        vo = mapper.ChackId(ENAME);
        System.out.println("IMP vo "+vo);
        // vo null이면 "널값"으로 리턴
        if(vo == null){
            ename="널값";
            System.out.println("널값 ename : "+ename);
            return ename;
        }else{
            System.out.println(" vo.getENAME() : "+ename);
            ename = vo.getENAME();
            return ename;
        }
    }
    
    public String  ChackDcode(String DCODE) {
        //vo로받아서 map담아 보내자
        String dcode = "";
        EmployeeVO vo = null;
        
        EcoLibraryMapper mapper = sqlsesstion.getMapper(EcoLibraryMapper.class);
        vo = mapper.ChackDcode(DCODE);
        System.out.println("IMP 사원번호 :"+vo);
        
        if(vo == null){
            dcode="널값";
            System.out.println(" 널값 dcode : "+dcode);
            return dcode;
        }else{
            dcode = vo.getDCODE();
            System.out.println("dcode : "+dcode);
            return dcode;
        }
            
    }

-MAPPER.JAVA

public EmployeeVO ChackId(String ENAME);
public EmployeeVO ChackDcode(String DCODE);

-MAPPER.XML  

  <select id="ChackId" resultMap="EmployeeMapper"
        parameterType="String">
        select * from employee where ENAME=#{ENAME}
    </select>
    <select id="ChackDcode" resultMap="EmployeeMapper"
        parameterType="String">
        select * from employee where DCODE = #{DCODE}
    </select>

but   404에러와 폼리셋, 그리드 리로드가 안됨!  근데 새로고침하면 입력값을 잘 들어가있음...

아마도 userInsertSubmit(params) 에서 뭔가 문제가 있는듯 ,,, 근데 controller에 값도 잘 주고 입력도 잘되는데...

  일단은 입력후 리턴할 값이 없으니까 success랑 error말고 ajax 로드 완료후 실행되는 옵션인 complete 으로 바꿈...

function userInsertSubmit(params){
    console.log("실행? ");
    $.ajax({                                
        url: '/library/user.do',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
        dataType: 'html',
        complete:function(){ // ajax완료 후 
            $("#list2").jqGrid({  // jqGrid 리로드
                 url : '/library/gridView.do', 
                 datatype : 'json'}).trigger("reloadGrid"); 
       
           // 사용자 입력 후 form reset
               $("#USER_insert").each(function(){
                   this.reset();
               });
        }
    });
    // 창을 닫기위해 속성을 변경
    $("#insert").attr("data-dismiss","modal"); 
}
 

바꾸니 잘됨 그런데 /library/user.do 404 에러는 왜 뜨는거지... 

404 에러는 

http://noritersand.tistory.com/210

이래서 뜬다함...  그래서 리턴값은 void니까 그냥  @ResponseBody 만 추가해줌

    //사원정보입력
    @RequestMapping(value = "/user.do", method = RequestMethod.POST)
    @ResponseBody
    public void userInsert(Locale locale, Model model,EmployeeVO vo) {
        System.out.println("사원정보입력-post "+vo);
        employeeServiceimp.userInsert(vo);
        
    }

그러니까 에러안뜸ㅋㅋㅋㅋ