ajax 에 대한 기본 개념이 잘 설명된 곳은 https://www.w3schools.com/jquery/jquery_ajax_intro.asp 다.
ajax 의 강력한 특징은 페이지 전체를 refresh 하지 않고서도 수행되는 비동기성이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.
jQuery ajax 의 다른 형태로 .get 또는 .post 처리가 가능하다.
형태가 심플하여 더 편할 수 있다. 아래 코드는 100% 동작하는 걸 확인하고 적어둔다.
대부분 자료들이 대략적인 컨셉만 적혀있고 참고로 사용할만한 샘플이 없는 거 같아서 적었다.
나와 같은 초보자들은 제대로 동작하는 샘플이 있어야만 그 다음에 응용 또는 활용이 가능하다.
$.get()함수, $.post() 함수는 url, url 파라미터, 요청의 성공시 응답을 받기 위한 콜백함수가 있다.
$.post(url, {userID:input_value}, function(data) {
// 통신이 성공했을 때 실행하는 함수
}, 'json');
url 파라미터는 key 와 value 쌍으로 구성된다. 파라미터가 여러개이면 콤마로 구분한다.
===== idCheck.php ====
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/> <!-- 검색엔진에서 검색 제외 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" /> <!--브라우저 호환성 설정 -->
<title>ID Join Check</title>
<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="img/icon.png" />
<link rel="apple-touch-icon" href="img/icon.png" />
<!-- 모바일 웹 페이지 설정 끝 -->
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/idCheck.js"></script>
</head>
<body>
<h1 class="title">아이디 중복검사</h1>
<div class="exec">
<form>
<input type="text" name="userID" />
<input type="button" id="checkid" value="중복검사" />
</form>
</div>
<div class="console"></div>
</body>
</html>
===== idCheck.js =====
$(function(){
$("#checkid").click(function(e) {
e.preventDefault(); // a 링크, form submit 실행 방지
var input_value = $("input[name='userID']").val();
// 입력 여부 검사
if(!input_value) {
alert("아이디를 입력하세요");
$("input[name='userID']").focus();
return false;
}
var url = 'idCheck_ok.php';
$.post(url, {userID:input_value}, function(msg) {
if (msg.result==1) { // idCheck_ok.php 의 결과값
$(".console").html("<span style='color:blue'>사용할 수 있는 아이디 입니다.</span>");
// alert('사용할 수 있는 아이디 입니다.'); 로 대신해도 된다.
} else {
$(".console").html("<span style='color:red'>사용할 수 없는 아이디 입니다.</span>");
// alert('사용할 수 없는 아이디 입니다.'); 로 대신해도 된다.
// 이 경우에는 $("input[name='userID']").val(''); 로 입력값을 초기화해도 좋다.
}
},'json');
});
});
https://link2me.tistory.com/954 참조하면 javascript 로 Form 제어하는 개념을 이해할 수 있다.
위의 예제에는 form method, action 을 생략해서 원하는 결과를 얻지 못할 수 있다.
form method를 생략하면 GET방식으로 동작된다.
form action 을 추가하고 동작할 경우에는 반드시 e.preventDefault(); // a 링크, form submit 실행 방지
를 추가해줘야 제대로 원하는 결과를 얻을 수 있다.
===== idCheck_ok.php ====
# PHP 기본 개념 이해는 http://link2me.tistory.com/1110 게시글을 참조하시라.
# ajax 를 이용하면 파일 A --> 파일 B로 이동하지 않고 결과를 얻을 수 있다.
<?php
session_start();
if(isset($_POST['userID']) && !empty($_POST['userID'])) {
$userID = trim($_POST['userID']);
require_once $_SERVER['DOCUMENT_ROOT'].'/dbconnect.php'; // db접속 성공
require_once $_SERVER['DOCUMENT_ROOT'].'/phpclass/loginClass.php';
$c=new LoginClass();
$rs = $c->UserIDJoinCheck($userID);
if($rs == '0') {
echo '{"result":"1"}';
} else {
echo '{"result":"0"}';
}
}
?>
===== loginClass.php ====
<?php
class LoginClass {
function UserIDJoinCheck($userID) {
if(!isset($userID) || empty($userID)) {
return '-1';
} else {
global $db;
$userID = preg_replace("/[\s\t]+/","", $userID); // 공백이나 탭 제거(사용자 실수 방지)
$sql = "select id, count(id) ";
$sql.= "from rb_s_mbrid where id= '".$userID."' ";
if($result = mysqli_query($db,$sql)) { //성공
$row = mysqli_fetch_row($result);
if($row[1] == '0') return 0;
return $row[1];
} else {
return '-1';
}
}
}
}//end class LoginClass
?>
===== 테이블 구조 =====
CREATE TABLE IF NOT EXISTS `rb_s_mbrid` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`site` int(11) NOT NULL DEFAULT '0',
`id` varchar(50) NOT NULL DEFAULT '',
`pw` varchar(50) NOT NULL DEFAULT '',
`code` int(6) NOT NULL DEFAULT '0',
PRIMARY KEY (`uid`),
KEY `site` (`site`),
KEY `id` (`id`),
KEY `code` (`code`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
도움되셨다면 공감 또는 ... 눌러주세요.
jquery.tablednd.js