CI 묻고 답하기

제목 회원가입시 AJAX를 이용한 아이디 중복확인 질문(질문추가2)
글쓴이 쿠사 작성시각 2014/12/28 01:48:43
댓글 : 12 추천 : 0 스크랩 : 0 조회수 : 21358   RSS
AJAX
----------------------------
$("#user_id").keyup(function() {
    var user_id = $('#user_id').val();

    $.ajax({
        type: "POST",
        url: "/user/user/user_id_check/" + user_id,
        data: "",                    
        datatype: "json",
        success: function(data)
        {
            //alert(data);
        }
    });
});

Controller
-----------------------------
// 아이디 체크
    function user_id_check($user_id) {
        if (preg_match("/[\,]?{$user_id}/i", $this->config->item('cf_prohibit_id'))) {
            $this->form_validation->set_message('user_id_check', '예약어로 입니다(사용불가).');
            
            return FALSE;
        }

        if ($this->User_Model->existId($user_id) != 0) {    // 유저아이디가 존재하는가 확인
            $this->form_validation->set_message('user_id_check', '이미 사용중인 아이디입니다.');
            
            return FALSE;
        }
        
        return TRUE;
    }

view
-----------------------------------
        
        
         
            
           
        






질문
----------------------------------------
기존에 회원가입버튼을 누르면 유효성 검사후에 오류가있는 필드 밑에 오류사유를 출력해주는것까지는 구현하였습니다. 여기서 submit을 하지않고도 아이디 입력시마다 id값 유효성을 확인하기위해  AJAX를 해보려고하는데 아직 AJAX에 대한 개념을 잘 못잡겠네요. 기존에 있던 form_validation을 이용하면 자동으로 필드밑에 붉은색으로 오류이유를 출력해주는데 이 메소드를 활용하여 AJAX를 구현하려는데 일단 AJAX까지는 실행이되고 success도 되는것 같은데 Return값이 TRUE/FALSE로 되어있어서 오류가 있다 없다 라는 메시지를 어떤식으로 view폼에 출력을 해야될지 모르겠습니다. 그리고 AJAX에서 success의 data도 true/false 인지 확인할수있는지...(계속 false만 나와서)

그리고 지금은 view에서  이런식으로 오류를 출력하고있는데 저기에다가 ajax의 오류를 출력하거나 혹은 저걸 없애고 span같은걸 만들어서 AJAX에서 문구를 넣으려고 하는데 controller단에서 span의 id를 가지고 값을 세팅할수도 있나요?




추가
----------------------------------------------------------------
아 다시생각해보니 저 처리는 예약어나 이미사용중인 아이디일때만 검사를 할수있네요. 폼 검증에서는 

'rules'=>'trim|required|min_length[4]|max_length[16]|alpha_dash|xss_clean|callback_user_id_check')

이렇게 정의되어있어서 길이나 그외의 사용가능한 아이디인지를 검사를해야되는데 어떻게 해야할지...


요약하자면 기존에 submit시에 form_validation으로 특정 array값(여기서는 id)를 검사하던걸 AJAX를 이용해서 검사해주려고 하는건데 잘 안되네요..






질문추가
--------------------------------------------------------------------------------------------------
이것저것 해봐도 잘 안되네요..;
$("#user_id").keyup(function() {
    var user_id = $('#user_id').val();

    if(4<= user_id.length)
    {    
        $.ajax({
            type: "POST",
            url: "/user/user/user_id_check/" + user_id,
            data: "result",                    
            datatype: "JSON",
            success: function(data, textStatus)
            {
                alert(data);
            }
        });
    }
});

이게 제 ajax코드입니다.
서버에서 검사한 후에 특정문자(예약어입니다, 이미사용중인아이디입니다, 사용가능한아이디입니다)를 전송하고 클라이언트에서 받아서 alert으로 출력하려고 하면 어떻게해야할까요...?
서버에서 json_encode이런걸 해봐도 어떻게 받아야하는지를 잘 모르겠네요.
 다음글 코드이그나이터 $this->db->where... (2)
 이전글 Unable to connect to your data... (3)
목록

댓글

수야디벨 / 2014/12/29 10:31:21 / 추천 0
AJAX로 보내기전에 폼 검증해주시면 됩니다.

만약 아이디 텍스트창이 <input type="text" id="user_id" /> 라면 

if($("#user_id").val().length > 4) 처럼 스크립트로 검사하시고 넘어가시면 됩니다~
델리카토 / 2014/12/29 15:37:03 / 추천 0
ajax가 안되는 건 아니죠?
일단, 컨트롤러에서 아이디 체크시에 echo로 값을 전송해 주는 것이 좋습니다.
물론 json_encode의 방식으로요.
해당 값(오류인지 아닌지, 어떤 오류의 형태인지, 기타 값등)을 배열로 만든뒤 json_encode해서 echo로 보내주시고요.
parsing하신뒤 해당 span에 $(elem).html('에러 메시지')의 형태로 진행 하시면 될것 같네요.
쿠사 / 2014/12/30 16:43:42 / 추천 0
델리카토 // 설명하신 말씀대로 하면 될것같긴한데 서버에서 json_encode로 값을 전달해주는법을 잘 모르겠네요.... (구글링 10시간정도째...)
변종원(웅파) / 2014/12/30 16:46:10 / 추천 0
쿠사/ 서버에서 json으로 뿌리는 방법을 모르겠다는 말씀인가요?

echo json_encode(배열);

그 반대라면 구글 검색하면 예제 많이 나옵니다. (자바스크립트에서 json 처리)
쿠사 / 2014/12/30 16:53:27 / 추천 0
변종원(웅파) // 답변 감사합니다. 그런데 서버에서 $data = array("test01" => "value01");  echo json_encode(data); 이런식으로 하는게 맞지않나요...? 잘 안되서 여러가지를 막 해봤는데 어디서 놓친부분이 있는것같은데 그걸 잘 못찾겠습니다;..
한대승(불의회상) / 2014/12/30 17:08:25 / 추천 0
정상적으로 나와도 alert창에 [object]만 출력되지 않나요?
정상적으로 출력되는지 확인하고 싶다면 크롬이나 파이어폭스에서 확인 하시고, alert() 대신 console.log() 사용하세요.
귀찮으면 아래 부분 처럼 주석 처리해 보세요.
  
 $.ajax({
            type: "POST",
            url: "/user/user/user_id_check/" + user_id,
            data: "result",                    
            // datatype: "JSON",
            success: function(data, textStatus)
            {
                alert(data);
            }
쿠사 / 2014/12/30 17:12:43 / 추천 0
한대승(불의회상) // 답변 감사합니다. 서버에서 $json_data = array("사용가능");  echo json_encode($json_data); 이렇게
클라이언트에서 var str = JSON.parse(data); alert(str); 이렇게 해서 문자만 받는거까진 했는데 이런식으로 해도 되는건가요..?
그리고 궁금한게있는데 이전에 서버의 array에서 "값명" => "값내용" 이렇게 해서 전달하니까 출력도 값명 값 내용이 이어져서 출력되던데 값명을 통해서 값내용을 전달받을수도 있나요? 지금은 값 명 부분을 아에 제거를 했는데(값내용이 제거된걸지도;?) 저렇게 해도 상관이 없나요...?
한대승(불의회상) / 2014/12/30 17:24:37 / 추천 0
datatype:"JSON" 하셨으면 객체로 변환이 되니 아래처럼 해보세요. 
alert(data.test01); // array('test01 ' => 'value') 일 경우
쿠사 / 2014/12/30 17:40:00 / 추천 0
한대승(불의화상) // 서버에서 $json_data = array('id_msg' => '사용가능한 아이디입니다.');  echo json_encode($json_data);
이렇게 하고 클라이언트에서 alert(data.id_msg); 이렇게 하는게 아닌가요? uindifined라는 메시지가 출력됩니다..
한대승(불의회상) / 2014/12/30 18:26:13 / 추천 0
datatype 을 "JSON" 으로 지정 하셨나요? 
 $.ajax({
            type: "POST",
            url: "/user/user/user_id_check/" + user_id,
            data: "result",                    
            datatype: "JSON", // 이부분에 주석처리 되어 있다면 제거
            success: function(data, textStatus)
            {
                alert(data);
            }
        });
쿠사 / 2014/12/30 18:44:59 / 추천 0 
  $.ajax({
   type: "POST",
   url: "/user/user/user_id_check/" + user_id,
   data: "result",     
   datatype: "JSON",

네 이부분이 제소스의 ajax부분입니다. 데이터타입은 JSON으로 되어있습니다.
jcoop / 2017/05/07 22:07:56 / 추천 0
제가 찾던 정보이네요~. 그럼, 잘 보고 갑니다.