[6] JavaScript & JQuery - ajax() 사용법

[ 환경 ]
ㄴ php 7 
ㄴ JQuery 1.11.1

https://kuk1938.tistory.com/55

[14] PHP - 회원가입

ㄴ 아이디중복확인 php로 구현한 기능 JQuery로 변경예정 

---

1. 버튼과 인풋 추가

ㄴ 중복확인버튼/ 중복확인되었는지 확인여부 input 추가

 

2. JQuery 코드 작성

// 아이디 중복체크
$(".idcheckBtn").click(function(){
	var id = $(".id").val(); // 아이디
		$.ajax({
			url : "idcheck.php",
			type : "POST",
			data : { id : id },
			success : function(result){
				var chcek = result.trim(); // 공백 제거
				switch(chcek){
					case "check" :
						alert("아이디가 중복되었습니다.\n다른 아이디 입력바랍니다.");
						return false;
					break;

					case "pass" :
						alert("사용할 수 있는 아이디입니다.\n 이어서 입력바랍니다.");
						$(".check").val("Y"); // 아이디 중복확인 여부 값
					break;
					}
				},
			error : function(XMLHttpRequest, textStatus, errorThrown){ // 비동기 통신 실패시.
            alert("통신 실패.")
         }
	})
})

ㄴ ajax 사용 - url,type,data,success 기본으로 쓰이며, 다른 유형에따라 옵션이 늘어난다.

- url : form에서 action의 경로

- type : form에서 method

- data : val()의 값

- success : 성공했을때 어떻게 처리할지

ㄴ switch case문을 사용하여 성공/실패 상황에 맞도록 코드 작성해준다.

 

3. PHP 코드 작성

<?php 
	require_once 'config.php';
	$id = $_POST['id']; // 아이디

	// 아이디 조회 쿼리문
	$sql = "
		SELECT 
			idx,
			id,
			pw,
			name
		FROM member 
		WHERE id = '{$id}' 
	";

	$result = $conn->query($sql); // 객체지향
	$select = $result->fetch_assoc(); // 객체지향
    
	// 아이디 중복확인
	if($select['id'] == $id){
		echo "check"; // 아이디 중복시 값
	}else{
		echo "pass"; // 아이디 중복 아닐때
	}
?>

 

ㄴ 아이디가 중복여부에 따라 조건값만 출력해준다.

- PHP에서 체크하던부분을 스크립트에서 처리하여 코드가 확 줄었다.

- check : 중복O / pass : 중복X 

 

4. 이전 JQuery 코드에 조건문 추가

https://kuk1938.tistory.com/63

[5] JavaScript & JQuery - click(), val()_2

ㄴ 해당 포스팅 제이쿼리 코드에 조건문 추가

var checkid = $(".check").val(); // 아이디중복확인 값
// 아이디 중복체크 확인
if(checkid == "N"){
    alert("아이디 중복확인을 하지 않았습니다.");
    return false;
}

ㄴ 추가될 조건문

 

// 회원가입 진행
$(".joinBtn").click(function(){
	var id = $(".id").val(); // 아이디
	var password = $(".password").val(); // 비밀번호
	var password_ch = $(".password_ch").val(); // 비밀번호 확인
	var checkid = $(".check").val(); // 아이디중복확인 값

	// 아이디 체크
	if(!id){
		alert("아이디를 입력하지 않았습니다.");
		return false;
	}

	// 아이디 중복체크
	if(checkid == "N"){
		alert("아이디 중복확인을 하지 않았습니다.");
		return false;
	}

	// 비밀번호 체크
	if(!password){
		alert("비밀번호를 입력하지 않았습니다.");
		return false;
	}

	// 비밀번호 체크
	if(!password_ch){
		alert("확인 비밀번호를 입력하지 않았습니다.");
		return false;
	}

	// 비밀번호 확인체크
	if(password){
		if(password != password_ch){
			alert("비밀번호가 일치하지 않습니다.\n비밀번호를 확인해주시기 바랍니다.");
			return false;
		}
	}
	$('form').submit(); // 모든 조건 통과시 폼 submit
})

ㄴ 완성 코드

 

5. 사이트(기능) 확인

 

ㄴ 아이디 중복확인 전 회원가입 막기 O

ㄴ 아이디 중복 O

ㄴ 아이디 미중복 O

ㄴ 중복체크 후 비밀번호 유효성체크로 O