jQuery AJAX 로그인 구현
페이지 정보
작성자 서방님 댓글 0건 조회 276회 작성일 15-07-09 13:28본문
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>
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 = array('user1'=>array('pw'=>'pw1', 'name'=>'한놈'), 'user2'=>array('pw'=>'pw2', 'name'=>'두시기'), 'user3'=>array('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"; ?>
예제
- → 아이디와 패스워드를 아무거나 입력하여 로그인해본다.
- → 아이디 user1, 패스워드 pw1 을 입력하여 테스트
같이 보기
참고 자료
댓글목록
등록된 댓글이 없습니다.
