"JQuery AJAX 로그인 구현"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:34 기준 최신판

jQuery AJAX 로그인 구현
jQuery 로그인 구현

1 login.php[ | ]

<!DOCTYPE html>
<meta charset="utf-8" />
<title>jQuery 로그인</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#login").click(function() {
		var action = $("#form1").attr('action');
		var form_data = {
			user_id: $("#user_id").val(),
			user_pw: $("#user_pw").val(),
			is_ajax: 1
		};
		$.ajax({
			type: "POST",
			url: action,
			data: form_data,
			success: function(response) {
				if(response == 'success') {
					$("#message").html("<p style='color:green;font-weight:bold'>로그인 성공!</p>");
					$("#form1").slideUp('slow');
				}
				else {
					$("#message").html("<p style='color:red'>아이디 또는 비밀번호가 잘못되었습니다.</p>");	
				}
			}
		});
		return false;
	});
});
</script>
<body>
<form id="form1" name="form1" action="login_ok.php" method="post">
<table>
<tr>
	<td>아이디</td>
	<td><input type='text' id='user_id' name='user_id' tabindex='1'/></td>
	<td rowspan='2'><input type='button' id='login' tabindex='3' value='로그인' style='height:50px'/></td>
</tr>
<tr>
	<td>비밀번호</td>
	<td><input type='password' id='user_pw' name='user_pw' tabindex='2'/></td>
</tr>
</table>
</form>
<div id="message"></div>
</body>

2 login_ok.php[ | ]

<?php
if(!isset($_POST['is_ajax'])) exit;
if(!isset($_POST['user_id'])) exit;
if(!isset($_POST['user_pw'])) exit;
$is_ajax=$_POST['is_ajax'];
$user_id = $_POST['user_id'];
$user_pw = $_POST['user_pw'];
$members = [
        'user1'=>['pw'=>'pw1', 'name'=>'김일구'],
        'user2'=>['pw'=>'pw2', 'name'=>'박이팔'],
        'user3'=>['pw'=>'pw3', 'name'=>'최삼칠'],
]; 
if(!$is_ajax) exit;
if(!isset($members[$user_id])) exit;
if($members[$user_id]['pw'] != $user_pw) exit;
setcookie('user_id',$user_id);
setcookie('user_name',$members[$user_id]['name']);
echo "success";	
?>

3 테스트[ | ]

아이디와 패스워드를 아무거나 입력하여 로그인해본다.
아이디 user1, 패스워드 pw1 을 입력하여 테스트

4 같이 보기[ | ]

5 참고[ | ]

http://blog.webwizo.com/2011/05/04/simple-login-with-php-and-jquery-ajax/

@@ 4번째 줄: / 4번째 줄: @@
 ==login.php==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <!DOCTYPE html>
 <meta charset="utf-8" />
@@ 52번째 줄: / 52번째 줄: @@
 <div id="message"></div>
 </body>
-</source>
+</syntaxhighlight>
 ==login_ok.php==
-<source lang='php'>
+<syntaxhighlight lang='php'>
 <?php
 if(!isset($_POST['is_ajax'])) exit;
@@ 75번째 줄: / 75번째 줄: @@
 echo "success";
 ?>
-</source>
+</syntaxhighlight>
-==예제==
+==테스트==
-*http://zetawiki.com/ex/jquery/login/login.php
+* 아이디와 패스워드를 아무거나 입력하여 로그인해본다.
-:→ 아이디와 패스워드를 아무거나 입력하여 로그인해본다.
+* 아이디 user1, 패스워드 pw1 을 입력하여 테스트
-:→ 아이디 user1, 패스워드 pw1 을 입력하여 테스트
 ==같이 보기==