[jQuery & JAVA] jQuery.getJSON() 중복체크 기능 만들기

$.getJSON()을 이용한 중복체크 기능 만들기

아이디나 비밀번호를 사용자가 입력할 경우, 우리는 중복체크 기능을 넣어서 중복을 제외시켜야한다.

jquery api에 나와있는 ajax ---> jQuery.getJSON()에 대한 설명 먼저 보자.

https://api.jquery.com/jQuery.getJSON/#jQuery-getJSON-url-data-success

jQuery.getJSON() | jQuery API Documentation

 

jQuery.getJSON(url , [data], [success])
 
- url
=> Type : String
=> 요청의 대상 url을 포함하는 문자열.
 
- data
=> Type : PlainObject or String
=> 요청과 함께 서버에 전송되는 일반 객체 또는 문자열입니다.
 
- success
=> Type : Function(PlainObject data, String textStatus, jqXHR jqXHR)
=> 요청이 성공하면 실행되는 콜백함수
 
 

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});
 

일단 서버로 전송되는 데이터(data) 는 문자열 쿼리로 URL에 추가된다.

data의 매개 변수의 값이 일반 객체인 경우, URL에 추가 되기 전에 string과 url 인코딩된다.

 

그럼 이제 일반적인 예제를 보며 이해하자.

* 예제)

 $.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });
 
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

1. url 부분에 "ajax/test.json", 요청이 성공할 때, function(data){}로 data 값 처리
2. items 배열생성
3. 요청에 성공한 데이터를 $.each메소드 안에 넣고 callback(function)에서 propertyName(key)와 Object(val)를 이용
4. push함수를 이용해 items 배열에 넣어준다. 
5. ex) ["<li id="keyname"> 안녕 </li>", "<li id="keyname"> 반가워 </li>"]  이런식으로 배열에 담긴다.
6. html에서 items배열에 join을 사용하여 배열을 하나의 문장으로 만들어준다. 
7. body선택자에 추가시켜준다.

 

아래부터 퍼가기 불가

---

대충 개념은 잡혔으리라 생각됨으로 이제 본론!!

중복체크 기능은 어떻게 만들까

일단 jsp부터 보자.

[JSP]

<input name="" type="button" value="중복체크" class="small_btn02" style="width:70px;" onclick="javascript:fncNmChk();">

 

버튼을 클릭하면 onclick이벤트 발생!! fncNmChk 자바스크립함수로 이동

[JAVASCRIPT FUNCTION]

function fncNmChk(){    // 게시판명 중복체크
    var nm = $("#board_nm_re").val();
    if( nm != '' && nm.length > 0 ){
        $.getJSON("/bms/boardMst/json0010b.do", {
            "board_nm" : nm
        }, function(data) {
            if (data.msg == 'Y') {
                $("#checkResult").html("사용할 수 있는 게시판명 입니다.");
                $("#board_nm").val(nm);
                $("#board_nm_re").val(nm);
            } else {
                $("#checkResult").html("이미 등록된 게시판명 입니다.");
                $("#board_nm").val("");
                $("#board_nm_re").val("");
                $("#board_nm_re").focus();
            }
        });
    }else{
        $("#checkResult").html('게시판명을 입력하세요.');
        $("#board_nm_re").focus();
    }
}

위 코드는 id가 board_nm_re이고 값이 있으면 중복체크를 하고 값이 없으면 게시판명을 입력하세요. 라는 텍스트가 뜨게 된다.

 

중복체크하는 과정에서 4번째줄

$.getJSON메소드 안에 url, 서버로 보낼 데이터 "board_nm", 요청이 성공했을 때 callback function(data)를

사용한 것을 볼 수 있다.

 

데이터 받을 url(controller)을 보자.

[JAVA - controller]

@RequestMapping(value = "/bms/boardMst/json0010b.do")
    public ModelAndView des22(HttpServletRequest request, HttpServletResponse response,
            @PathVariable String menuID,
            @ModelAttribute("boardMasterVO") BoardMasterVO boardMasterVO, Model model) throws Exception {
        
        ModelAndView mav = new ModelAndView();
        MappingJackson2JsonView jsonView = new MappingJackson2JsonView();
        mav.setView(jsonView);
        
        // 등록된 게시판명 체크
        int chk = (Integer) boardMasterService.selectBoardNM(boardMasterVO.getBoard_nm());
        if (chk > 0) {    // 이미 등록된 이름인 경우
            model.addAttribute("msg", "N");
        }else{
            model.addAttribute("msg", "Y");
        }
        
        return mav;
    }

* MappingJackson2JsonView

클라이언트에서 controller로 ajax요청을 했을 경우, ModelAndView를 JSON형태로 return받기 위해서 사용하는 클래스.

 

setBoardNm sql에서 클라이언트가 입력한 board_nm을 받고 board_nm에 해당하는 게시판의 개수를 가져와서

chk(게시판 개수)가 0보다 클 경우, msg에 N  / 작을 경우 msg에 Y를 return한다.

 

다시 스크립트 함수로 가보면 if문 안에 data.msg == 'Y'로 써놓은 것을 볼 수 있다.

즉, Y일 경우, 해당 게시판 이름이 없는 것이니 "사용할 수 있는 게시판 입니다."가 출력.

 

위와 같은 방법으로 아이디 및 비밀번호도 중복체크가 가능하다.