티스토리 뷰
아이디 중복확인 with. 제이쿼리, AJAX
1. 제이쿼리의 load 메서드를 사용하여 실시간으로 아이디가 중복인지 아닌지를 체크한다.
2. 그 결과를 HTML에 바인딩 하여 "사용가능 합니다" 혹은 "중복된 아이디 입니다" 로 결과를 볼수 있게 한다.
3. 중복 여부의 값을 클라이언트에서 판단하기 위해서 동적으로 추가된 엘리먼트에 true 혹은 false 로 텍스트 문자열을
값으로 바인딩 하여 아래와 같이
ex : <span id='id_res_Bool' style='display:inline;'>true<span>
로 결과를 리턴하고 'true', 'false'를 조건문으로 판별하여 최종 입력폼을 전송할때 데이터가 전송되지 못하게 한다.
값의 전달 방법만 다를 뿐, 변수나 리턴값이 아닌 엘리먼트 텍스트로 하는 방법은 본인이 그냥 편하게 쓰기위하여 이렇게 한거다.
실무에서는 display를 none으로 속성만 바꾸는 정도로 처리하면 문제없다.
결과물 소스 :
ID_DUPL.zipHTML - index.html
<body> <div id="wrap"> <form name="frm" method="post" action="#"> ID <input type="text" name="uID" value="" placeholder='...' required /> <button type="button" id="ID_dupl_btn">ID 중복확인</button> <span id="ID_dupl_resTxt"></span> <br /><br /> <button type="submit">확인</button> </form> </div> </body>
결과 이미지)
javascript - index.html
1. ID 중복확인 을 눌렀을 때 입력란이 공란이면 알럿을 띄운다.
2. 확인을 눌렀을 때 입력란이 공란이면 알럿을 띄운다. (HTML의 required 기능을 지원받음)
3. 확인을 눌렀을 때 중복확인을 하지 않았거나, 중복된 아이디 결과를 가지고 있을 경우 알럿을 띄운다.
4. 중복확인을 data.php에 GET방식으로 전송하고 그 결과를 화면에 표시한다.
<script>
$(document).ready(function(){
/* --------------------------------------------------------
descr
-----------------------------------------------------------*/
var frm = $("form[name='frm']");
var uID = frm.find("input[name='uID']");
var duplBool = false;
var ID_dupl_btn = frm.find("#ID_dupl_btn");
var ID_dupl_resTxt = frm.find("#ID_dupl_resTxt");
ID_dupl_btn.click(function(){
if( uID.val() == "" ){
alert('ID를 입력해주세요.');
return false;
}
var param = encodeURI('id='+uID.val());
ID_dupl_resTxt.load('data.php?' + param, complete);
function complete(){
var res = $("#id_res_Bool").text();
duplBool = res;
}
});
//폼이전송 되면
frm.submit(function(){
if( duplBool == 'false' ){
alert("아이디체크를 진행해 주세요.");
return false;
}
});
});
</script>
* 내용추가.
현재 duplBool 변수의 최종 리턴값은 문자열인 "false", "true"로 판별하고 있는데
만약 불리언값으로 변경하여 사용하려면
complete의 res 값을 텍스트가 아닌 eval(res) 로 string => variable 처리 하면 다음과 같이 사용할 수 있다.
var res = $("#id_res_Bool").text();
duplBool = eval( res );
이후 조건 검사
if (duplBool == false) 혹은 if ( duplBool == true ) ....
data.php (ajax)
1. DB에 접속(여기서는 mysql)
2. GET으로 받은 id 값을 가지고 DB에 질의 하여 ID가 있는지 확인한다.
ㄱ. 중복된 아이디가 있으면 -> ID Unavailable 이라는 Text를 표시해 준다.
추가로 id = 'id_res_Bool' 의 Text값이 false
ㄴ. 중복된 아이디가 없으면 -> ID Available 이라는 Text를 표시해 준다.
추가로 id = 'id_res_Bool' 의 Text값이 true
<?
header('Access-Control-Allow-Origin: *');
header("content-type:text/html;charset=utf-8");
$ip = "127.0.0.1";
$user = "admin";
$pass = "1234";
$db = "test";
$connect = mysql_connect($ip, $user, $pass, true) or Error("Local DB 접속시 에러가 발생했습니다");
mysql_select_db($db, $connect) or Error("DB Select 에러가 발생했습니다","");
mysql_query("set character_set_results=utf8", $connect);
mysql_query("set names utf8", $connect);
$id = $_GET["id"];
$sql = "SELECT name FROM student_management WHERE user_id = '{$id}'";
$LoginResult = mysql_num_rows( mysql_query($sql, $connect) );
if( empty($LoginResult) ){
echo "<span style='color:green;'>ID Available</span>\n
<span id='id_res_Bool' style='display:inline;'>true<span>\n"; //중복아님, 녹색
}else{
echo "<span style='color:red;'>ID Unavailable</span>\n
<span id='id_res_Bool' style='display:inline;'>false<span>\n"; //중복, 빨간색
}
?>
결과
'■ 프론트엔드 ■ > AJAX' 카테고리의 다른 글
| ajax 라이브러리 sendRequest-ajax.js (0) | 2018.04.24 |
|---|---|
| 04. 제이쿼리 ajax and php JSON데이터 (0) | 2014.08.28 |
| 03. 제이쿼리 ajax로 xml 파싱 (0) | 2014.08.28 |
| 03. 제이쿼리 load → JSON데이터 (0) | 2014.08.28 |
| 02. XMLHttpRequest 함수화 - sendRequest(url, param, callback, method, asyncBool) (0) | 2014.08.28 |