ajax(asynchronous Javascript and XML) 회원가입 처리를 하면서 에러가 발생하면 디버깅을 해야 한다.
ajax를 이용해서 클라이언트와 서버가 사용자에게 영향을 미치지 않고 백그라운드에서 정보를 주고 받을 수 있다.
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 데이터만 처리가 되더라.
체크박스로 체크한 데이터만 추가하는 것이다.
// 전체 선택, 전체 해제 |
<?php |
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] Table Filtering (0) | 2017.12.13 |
|---|---|
| [jQuery] 선택된 인자가 몇 번째인지 (0) | 2017.12.13 |
| 자바스크립트 값을 PHP로 전달 관련 알아둘 사항 (0) | 2017.10.25 |
| jQuery URL parameter 값 가져오기 (0) | 2017.03.18 |
| ajax 상대 경로 설정 문제 완벽 해결방법 (0) | 2017.02.21 |
Link2Me
bxslider.zip
