jQuery AJAX 로그인 구현

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 참고[편집]

문서 댓글 ({{ doc_comments.length }})
{{ zf.userName }}
{{ comment.name }} {{ comment.created | snstime }}