ajax로 로그인 구현 , 해결 안되서 다시 질문합니다.

ajax로 로그인 구현 , 해결 안되서 다시 질문합니다.

QA

ajax로 로그인 구현 , 해결 안되서 다시 질문합니다.

본문

현재 index.php-> login.php 로 이동되어서 로그인 양식 입력하게끔 해놓았습니다.

db.inc.php  : DB 연결 부분

login.proc.php : 로그인 값 받아서 처리하는 프로세스 부분

login.php 안에 ajax를 사용하여 login.proc.php 로 넘겨서 login.php 폼안에 출력을 해주고 있는데

login.proc.php 안에서 include("./../include/db.inc.php"); include가 기본적으로 되어있는데

db.inc.php 있는 연결정보 코드를 가져와 login.proc.php 여기 안에다가 넣어야지만 

ajax가 정상 작동합니다.  db연결파일을 이미 include 했는데 왜 정보를 가져와서 넣어야되는지 모르겠습니다.기존에는 db파일 include 해놓고 ajax사용하기전에 쿼리결과 가져와서 출력하는거까지 성공했는데

ajax 코드를 작성하고 나니 저러네요 하단에 코드 몇가지 생략해서 첨부합니다. 


// login.php   ajax를 여기 안에 넣었습니다. //
  <form class="loginbox" id="loginF">
                <h1>Login SAmple2</h1>
                <div id="login-error"></div>
                <input type="text" id="userId" name="userName" placeholder="USER ID">
                <input type="password" id="userPw" name="userPw" placeholder="PASSWORD">
                <button type="submit" name="login-submit" id="logbtn">LOGIN</button>
                <button type="button" name="join" 
</form>
// ajax/
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).on("submit", "#loginF", function(event) {
                    event.preventDefault();
                    $.ajax({
                        type: "POST"
                        , url: "/resource/process/login.proc.php"
                        , data: $(this).serialize()
                        , success: function(response) {
                            
                            if (response == "success") {
                                $("#login-error").html("<div class='alert alert-success'>Login success</div>");
                                
                           
                            }
                            if (response == "error") {
                                $("#login-error").html("<div class='alert alert-warning'>Login warning</div>");
                            }
                        }
                    });
                });
            });
        </script>
 
 
//db.inc.php db연결 파일 //
 
<?php
$serverName = "localhost";
$userName = "root";
$userPass = "root";
$dbName = "exstart";
$dbconn = new mysqli($serverName , $userName ,$userPass ,$dbName);
$dbconn -> set_charset("utf8");
if(mysqli_connect_error()){
echo "데이터베이스 접속 실패","<br>";
echo "Error Msg : ",mysqli_connect_error();
}

?>
 
//
 
// login.proc.php //
 
<?php 
include("./../include/db.inc.php");
 
$userid = trim($_POST['userName']);
$userpw = $_POST['userPw'];
$sql = "SELECT * FROM userinfo WHERE userId = ? AND userPw = ?";
$stmt = $dbconn->prepare($sql);
$stmt->bind_param('ss',$userid ,$userpw);
$res = $stmt->execute();
$res = $stmt->get_result();
if ($res->num_rows == 1) { 
 
echo "success" ;
 
} else {
 
 echo "error";
}
?>

 

일부로 에러도 내보고

alert 창 리스폰스 값 받아오는지

맥 mamp , xampp 윈도우 xampp  , php 5.6 부터 7버젼떄까지 10가지 버전 테스트

절대경로,상대경로 해보고 경로도 일부로 틀려보고

여러가지를 다 해봐도 db연결파일 include 했을시에만 값만 받아오고 정상적으로 ajax가 작동을 안합니다.

db연결파일안에 접속정보를 로그인프로세스 파일에 직접 적어야되는 상황이므로.

직접적으면 ajax가 정상적으로 작동합니다.

값을 받아오고 로그인 입력란에  간단한 구문이 출력되는데 db파일 include햇을시에만

값만 받아오고 구문 출력이 안되는것입니다 그 원인을 아시는분

답변좀 주시면 감사하겠습니다~

 

db연결방식을 mysqli -> pdo로 바꿔도 같습니다 혹시 몰라 해본거라..ㅠ

php7.3 mysql 등 최신버전입니다.

이 질문에 댓글 쓰기 :

답변 2

login.php 페이지, js 부분에서 data를 serialize해서 보내셨는데 정작 받는 페이지(login.proc.php)에서는 unserialize가 없네요.

 

로그인 페이지라면 넘길 만한 값이 많지도 않을 텐데 굳이 serialize를 하시는 이유를 모르겠네요.

그냥

data : {

   userName : $("#userId").val(),

   userPw : $("#userPw").val()

},

이렇게 넘기시는 게 더 낫지 않나요?

그래서 현재 예제 찾아보고 이방법으로 하는중인데
response값이 success 여도 else구문에 있는 html이 출력됩니다.
값이 fail 이여도 else구문에 있는것이 출력되구요.
요부분 답변 주시면감사하겠습니다!
  $(document).ready(function () {
                $("#loginbtn").click(function () {
                    var action = $("#loginForm").attr('action');
                    var form_data = {
                        userName: $("#userId").val()
                        , userPw: $("#userPw").val()
                    , };
                    $.ajax({
                        type: "POST"
                        , url: action
                        , data: form_data
                        , success: function (response) {
                            if (response == "success") {
                                $("#login-error").html("<p style='color:green;font-weight:bold'>로그인 성공!</p>");
                                $("#loginForm").slideUp('slow');
                            }
                            else{
                                $("#login-error").html("<p style='color:red'>아이디 또는 비밀번호가 잘못되었습니다.</p>");
                            }
                        }
                    });
                    return false;
                });
            });

console.log(response);
는 당연히 찍어 보셨으리라 봅니다.

그리고 login.proc.php 페이지에서 다 주석으로 막으신 후에 print_r($_POST);를 했을 때 값이 어떻게 나오는지 확인해 보세요.

답글 달아드릴래도 이해가 안되서 힘드네요 ㅠ.ㅠ

 

정상적으로 받아오는데 뭐가 문제인지 다시한번 설명해주시면 좋겟네요

db연결 파일 inlucde 하면 html구문이 출력이 안됩니다.
response 값은 정확히 받아오구요 alert창으로 해도 받아오고 콘솔창에는 에러는 없구요
일부로 에러내면 에러는 정확히 뜨구요
db연결파일 include된거 주석처리하고 연결정보 직접 넣으면
response값 받아오고 html구문 출력이 또 되구요.

차이가 있으면 안되는데 에러가 난다면 하나씩 제거해 보세요
set_charset 하고 에러 관련 구문도 주석처리 해보시구요

이상이 없어야 하는 구문이 이상이 있다면 처음부터 다시 하는 수밖에 없어 보입니다. ㅎㅎ

써놓고 보니까 ...

$userName 이 변수가 겹칩니다.

DB 연결 변수를 $db_userName, $db_userPass 로 바꾸세요..

아파치 설정에 따라 변수가 중복될수 있는데 그 문제로 보이네요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,128 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT