[jQuery] ajax 처리 디버깅

ajax(asynchronous Javascript and XML) 회원가입 처리를 하면서 에러가 발생하면 디버깅을 해야 한다.

ajax를 이용해서 클라이언트와 서버가 사용자에게 영향을 미치지 않고 백그라운드에서 정보를 주고 받을 수 있다.

입력변수로 넘어가는 부분에서 에러가 발생하는지 여부는 alert 창으로 확인하면 된다.

echo '{"result":"0"}'; // echo json_encode(array('result' => '0')); 과 동일

echo json_encode(array('result' => '1')); // 회원 등록 성공

echo json_encode(array('result' => '-1')); // 회원 등록 실패

echo json_encode(array('result' => '-2')); // 입력받은 데이터에 문제가 있는 경우

처리된 결과를 return 받은 곳에서 에러가 발생하는지 파악할 때

dataType 이 json 으로 되어 있으면 alert(response); 를 해도 Object.object 라서 에러 메시지가 무엇인지 내용을 알 수 없다.

이럴 경우에는 dataType 을 text 로 변경한 다음에 alert(response); 를 해보면 경고메시지 등이 반환된 것을 알 수 있다.

경고메시지 발생부분을 모두 수정하고 나서, 다시 dataType 을 json 으로 변경하고, alert(response); 를 주석처리해주면 된다.

간단한 것인데도 이 부분에서 자꾸 순간적인 실수를 해서 그냥 적어둔다.

문제가 발생하는 부분은

1. 넘겨주는 url 경로변수가 잘못된 경우

2. dataType 을 json 으로 했는데 respone == 1 이라고 잘못 처리하는 경우

   response.result == 1로 처리해야 한다.

   만약 넘겨주는 값이 {"status":"true","result":"0"} 라고 한다면

   respone.status == true

   response.result == 0

   와 같이 if 조건문을 설정해야 한다.

3. 넘겨주는 data 값이 잘못되었는지 여부도 2번에서 text 로 받아서 메시지를 확인하면 된다.

    http://link2me.tistory.com/1130 참조

4. 파일 인코딩 모드가 UTF-8 인지 확인한다.

var loginpath =$("#ajaxPath").attr('data-path');

PHP 변수를 ajax에서 인식 못해서 아래와 같이 html 코드를 추가해서 경로변수를 자동인식하도록 처리했다.

<div id="ajaxPath" data-path="<?php echo $g['path_page'].'process/'; ?>" ></div>

$('#join-submit').click(function(e){
    e.preventDefault();
    // 입력값 체크는 생략

    var loginpath =$("#ajaxPath").attr('data-path');
    $.ajax({
        url: loginpath+'registerChk.php',
        type: 'POST',
        data: {
            userNM:$("#inputName").val(),
            userID:$('#inputEmail').val(),
            password:$('#inputPassword').val(),
            mobileNO:$("#inputMobile").val()
        },
        dataType: "json", // json, text
        success: function (response) {
            //alert(response);
            if(response.result == 1){
                alert('가입 완료');
                location.replace('index.php'); // 화면 갱신
            } else if(response.result == 0){
                alert('이미 가입된 아이디입니다');
            } else if(response.result == -2){
                alert('입력 데이터를 확인하세요');
            } else {
                alert('등록중에 에러가 발생했습니다');
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert("arjax error : " + textStatus + "\n" + errorThrown);
        }
    });       
   
});

ajax 대신에 post 를 사용할 경우에는 text 데이터만 처리가 되더라.

체크박스로 체크한 데이터만 추가하는 것이다.

// 전체 선택, 전체 해제 $("#checkall").change(function() {     $("input:checkbox").prop('checked', $(this).prop("checked")); }); $('#Favorite').click(function() {     var chkdata = new Array();     $('input:checkbox[name="uid[]"]:checked').each(function() {         chkdata.push($(this).val()); // 체크한 아이템 배열로 저장     });     if (chkdata.length == 0) {// 배열의 길이가 0 이 아니면         alert('체크한 항목이 없습니다.');     }     $.post(datapath+"favoriteChk.php", {         userID:$("input[name=userID]").val(), chkdata:chkdata     }, function(msg) {         if(msg == 1){             alert('관심 항목을 추가했습니다.');             $("input:checkbox").prop('checked', false);         } else if(msg == 0) {             alert('수정할 데이터가 없습니다.');             $("input:checkbox").prop('checked', false);         } else {             alert('데이터를 확인하세요\n'+msg);         }     }); });

<?php if(!isset($_SESSION)){     session_start(); } //echo '<pre>';print_r($_POST);echo '</pre>'; if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){     @extract($_POST);     require_once 'path.php';// root 폴더를 기준으로 상대적인 경로 자동 구하기     require_once $g['path_config'].'dbconnect.php';     require_once $g['path_class'].'adminClass.php';     $a = new adminClass();     if(isset($chkdata)){         $rs = $a->putFavoriteData($userID,$chkdata);         echo $rs;     } } else {     echo -1; } ?>