2022. 10. 17. 20:11ㆍProgram/PHP
158_AJAX와 PHP 연동
[요약]
- AJAX와 PHP 그리고 데이터베이스를 연동하는 기능에 대해 알아보자.
AJAX를 활용하여 서버에 데이터를 전달하고 서버에서는 전달받은 값을 활용하여 각각 다른 데이터를 반환하여 사용자에게 알리는 기능을 구현해보자. 만들 프로그램은 이메일 주소가 이미 데이터베이스 내에 존재하는지 알려주는 프로그램이다.
다음은 이메일 주소를 입력하는 폼과 중복 확인 버튼이 있는 페이지이다.
페이지를 변환하지 않고 이메일 주소의 중복 유무를 확인하므로 form 태그를 사용하지 않는다.
[예제: 161-1_client.php ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이메일 중복 체크 프로그램</title>
<script>
function emailCheck() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
result = JSON.parse(this.responseText).result;
if(result == 'none') {
document.getElementById('status').innerText = '사용 가능';
} else {
document.getElementById('status').innerText = '사용 불가';
}
}
};
emailAddress = document.getElementById('emailAddress').value;
xhttp.open('POST', '161-2_server.php', true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("email="+emailAddress);
}
</script>
</head>
<body>
<input type="email" id="emailAddress" />
<input type="button" value="중복 확인" onclick="emailCheck()" />
<p id="status"></p>
</body>
</html>위 코드에서 사용된 코드중 document.getElementById('status')는 id 속성의 값이 status인 태그를 선택하는 것을 의미한다.
id 속성은 태그에 사용하는 속성이며 같은 값을 사용할 수 없는 특징을 갖고 있다.
.innerText는 태그 안에 표시할 내용을 입력할 때 사용한다.
또한 p태그는 문장을 입력할 때 사용하는 태그이다.
이 태그에 id 송성을 사용하여 status값을 입력했다. 그러므로 이 태그에 이메일 주소의 사용 유무를 13라인 또는 15라인에 의해서 표시하게 된다. 현재는 태그에 어떠한 텍스트도 없지만 13라인이 작도하면 31라인은 다음과 같은 기능을 하게 된다.
<p id="status">사용 가능</p>form 태그를 사용하여 값을 전송할 때는 input 태그에 name 속성을 사용하여 이름을 부여했다.
[예제 161-1]은 하나의 페이지에서 데이터를 요청하는 기능을 하므로 form 태그를 사용하지 않는다.
이메일 입력폼에 id 속성을 사용하여 emailAddress라는 값을 적용했고 이 id값을 사용하여 이메일 입력폼에 입력된 값을 가져올 수 있다.
20라인의 document.getElementById('emailAddress') 는 id의 값이 emailAddress인 태그를 의미하며 value는 해당 태그에 입력된 값을 가져오는 기능을 갖는다. 이메일 입력폼에 입력된 값은 변수 emailAddress 에 대입된다.
24라인에서 값을 "email="+emailAddress로 작성하여 전송했다.
여기에서 사용된 + 는 PHP의 연결 연산지인 .(점)과 같은 역할을 한다. 그러므로 email=playdaddy@gmail.com과 같은 값이 전송되게 된다. GET 방식의 데이터를 전송할 때와 마찬가지로 2개 이상의 값을 보내려면 &를 사용하여 더 값을 붙일 수 있다.
30라인의 onclick이라는 속성이 있다. onclick 속성은 클릭했을 때 작동해야 할 함수를 값으로 사용한다.
[중복 확인] 버튼을 누르면 7라인에서 생성한 emailCheck() 함수가 실행되어 이메일 값을 서버에 보내게 된다.
이제 이메일 주소를 전달받아 데이터베이스에 존재하는 이메일인지 아닌지를 알려주는 예제를 만들어보자.
[예제: 161-2_server.php ]
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/php/108-2_connectDB.php';
$email = $_POST['email'];
$emailValidateCheck = filter_Var($email, FILTER_VALIDATE_EMAIL);
if ($emailValidateCheck) {
$sql = "SELECT email FROM myMember WHERE email = '{$email}' ";
$result = $dbConnect->query($sql);
$dataCount = $result->num_rows;
$emailCheck = 'none';
if ($dataCount > 0) {
$emailCheck = 'exists';
}
echo json_encode(
array(
'result' => $emailCheck,
)
);
} else {
echo json_encode(
array(
'result' => 'notEmail',
)
);
}
?>실행결과
위의 결과이미지는 myMember 테이블에 이미 존재하는 이메일을 입력했을 때의 결과이미지이다.
다음은 테이블에 존재하지 않는 이메일 주소를 입력한 결과이다.
초보자를 위한 PHP 200제
김태영 지음 | 정보문화사
'Program > PHP' 카테고리의 다른 글
| [PHP] 웹에서 입력한 코드 결과 보기 (2/2) - 코드의 실행 결과 보기 (0) | 2022.10.29 |
|---|---|
| [PHP] 클라이언트에서 JSON 데이터 호출하기 (0) | 2022.10.17 |
| [PHP] 데이터베이스 자료를 JSON으로 만들기 json_encode() (0) | 2022.10.17 |
| [PHP] PHP에서 데이터를 JSON으로 만들기 json_encode() (0) | 2022.10.17 |
| [PHP] PHP에서 JSON 데이터 다루기 file_get_contentes(), json_decode() (0) | 2022.10.15 |