2014-01-29 3 views
1

jQuery UI 모달 대화 상자를 사용하여 사용자 로그인 시스템에서 HTML 스크립트와 PHP 스크립트를 상호 작용합니다. 최근에, 필자는 모든 사용자 기능을 하나의 PHP 파일로 옮겼습니다. 이전에 헤더 마크 업에서 사용했던 곳이었습니다.jQuery UI 대화 상자에서 AJAX 호출

유효한 사용자 이름/암호를 입력하면 로그인 기능을 사용할 수 있었지만 지금 다른 사람이 올바른 사용자 이름을 입력했지만 잘못된 암호를 입력하려고하거나 다른 암호를 입력하려고 시도하고 있습니다. 존재하지 않는 사용자 이름입니다.

내가 겪고있는 문제는 AJAX Dialog 스크립트를 호출하는 것입니다. 로그인 폼을 같은 페이지 인 user.php에 제출하고 사용자를 로그인하거나 같은 대화 상자에서 div를 채울 오류 메시지를 반환하고 싶습니다.

지금 당장 내 코드는 오류 메시지를 반환하지만 사용자 양식의 복사본도 반환합니다. 내가 여기서 뭘 잘못하고 있는지 잘 모르겠다. ...
모든 의견을 부탁드립니다.

EDIT :이 파일에 의해 추가 된 HTML이 완전히 사라지는 한 가지 대답을 기반으로 변경 한 이후로 user.php 전체를 게시하기로 결정했습니다. 지금은 내가 잘못 아마 몇 가지가있다 같은데요 :

<html> 
    <span id="user"> 
      <ul> 
       <?php 
        //if user is logged in, show name and Log Out option, else show Log In and Sign Up options 
        if(isset($_COOKIE["user"])) { 
         setSessionUserData($_COOKIE["user"]); 
         echo "<li>Logged in as {$_SESSION["username"]}</li>"; 
         echo "<li>&nbsp;|&nbsp;</li>"; 
         echo "<li><a href='#' id='logout_link'>Log Out</a></li>"; 
        } else { 
         echo "<li><a href='#' id='login_link'>Log In</a></li>"; 
         echo "<li>&nbsp;|&nbsp;</li>"; 
         echo "<li><a href='#'>Sign up</a></li>"; 
        } 
       ?> 
      </ul> 
    </span> 

    <div id="login_dialog" title="Existing User"> 
     <form id="login_form"> 
      <fieldset> 
       <label for="userid">Username</label> 
       <input type="text" name="username" id="username" /> 
       <label for="pw">Password</label> 
       <input type="password" name="pw" id="pw" /> 
      </fieldset> 
     </form> 
     <span class = "error"></span> 
    </div> 
    <div id="logout_dialog" title="Log Out"> 
     <p><span class="ui-icon ui-icon-alert alert-icon"></span>Are you sure you want to log out?</p> 
    </div> 

    <script> 
    $(function() { 
     var username = $("#username"), 
     password = $("#pw"), 
     loginFields = $([]).add(username).add(password); 

     $("#login_link").click(function() { 
      $("#login_dialog").dialog("open"); 
     }); 

     $("#logout_link").click(function() { 
      $("#logout_dialog").dialog("open"); 
     }); 

     $("#login_dialog").dialog({ 
      autoOpen: false, 
      height: 200, 
      width: 250, 
      resizeable: false, 
      modal: true, 
      buttons: { 
       Submit: function() { 
        $.post("auth.php", 
          { 
          username: $("#username").val(), 
          password: $("#pw").val() 
          }, 
          function(result) { 
           if(result=='success'){ 
             window.location='Practice.php'; 
           } 
           else { 
            $(".error").html(result); 
           } 
          } 
         ) 
        }, 
       Cancel: function(){ 
        $(this).dialog("close"); 
       }     
      }, 
      close: function() { 
       loginFields.val(""); 
      } 
     }); 

     $("#logout_dialog").dialog({ 
      autoOpen: false, 
      modal: true, 
      height: 150, 
      resizeable: false, 
      buttons: { 
       Okay: function() { 
        window.location = "logout.php"; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    }); 
</script> 
</html> 

<?php 

function setSessionUserData($cookie) { 
    $con = connect(); 

    $query = "SELECT * FROM practice_user WHERE userid = '$cookie'"; 
    $result = mysqli_query($con, $query); 
    $userData = mysqli_fetch_array($result); 

    $_SESSION["username"] = $userData["username"]; 
    $_SESSION["fname"] = $userData["first_name"]; 
    $_SESSION["lname"] = $userData["last_name"]; 
} 

?> 

이 ... 그리고 PHP :

if($_SERVER["REQUEST_METHOD"] == "POST") { 
$user = test_input($_POST["username"]); 
$pass = test_input($_POST["password"]); 

//check if correct login 
if (chkLogin($user, $pass)) { 
    $id = getUser($user, $pass); 
    setUserCookie($id); 
    header("Location: Practice.php"); 
} 
//check if username exists but incorrect password entered 
else if (chkUser($user)) { 
    echo "Username and password do not match"; 
} 
//Or else return that username doesn't exist 
else { 
    echo "Username does not exist"; 
} 

}

내 코드에 다른 기능이 있습니다 유효성 검사 등을 처리 할 수 ​​있습니다.
게시해야하는 경우 알려 주시기 바랍니다. 당신이 시도 할 수

+0

"사용자 양식의 사본을 반송하십시오"는 것은 무엇을 의미합니까? 이 PHP 코드는 리디렉션을 발생 시키거나 문자열을 반향하는 것입니다. 나는 다른 어떤 잠재적 인 결과물도 보지 못하고있다. 여기에 나와 있지 않은 코드에 다른 출력이 있습니까? 여기서 무슨 일이 일어나고 있는지는 분명하지 않습니다. – David

+1

PHP에서 성공 리디렉션을 수행하십시오. 왜 그냥 성공을 리턴하지 않고 자바 스크립트에서 리디렉션을 수행합니까? – MamaWalter

+0

이 특정 파일에는 많은 코드가 있습니다. 내가 여기 올린 것은 로그인 기능에만 관련된 것입니다. 나머지는 밸리데이션 기능이며 다른 기능 (로그 아웃, 계정 생성 등)을위한 코드입니다. 문제는 PHP에서 처리하는 방법에 있다고 생각합니다. 나는 성공을 위해 리다이렉트하고 싶다 ... 아마 AJAX를 제대로하지 않을 것이다 ... 또는 PHP. 확실하지 않습니다./ – amthomas2112

답변

2

,

당신은 아약스는 PHP 파일 자체를 호출에서 페이지를 리디렉션 할 수 없습니다, 그래서 리디렉션 섹션은 자바 스크립트 측면으로 이동했다.

JQuery와,

$("#login_dialog").dialog({ 
      autoOpen: false, 
      height: 200, 
      width: 250, 
      resizeable: false, 
      modal: true, 
      buttons: { 
       Submit: function() { 
        $.post("auth.php", 
          { 
          username: $("#username").val(), 
          password: $("#pw").val() 
          }, 
          function(result) { 
           if(result=='success'){ 
            window.location='Practice.php'; 
           }else{ 
            $(".error").html(result); 
            } 
           } 
         ) 
        }, 
       Cancel: function(){ 
        $(this).dialog("close"); 
       }     
      }, 
      close: function() { 
       loginFields.val(""); 
      } 
     }); 

auth.php라는 새로운 페이지를 포함하여 의존성 PHP 함수를 만듭니다.

<?php 

    if($_SERVER["REQUEST_METHOD"] == "POST") { 
    $user = test_input($_POST["username"]); 
    $pass = test_input($_POST["password"]); 

    //check if correct login 
    if (chkLogin($user, $pass)) { 
     $id = getUser($user, $pass); 
     setUserCookie($id); 
     echo "success"; 
    } 
    //check if username exists but incorrect password entered 
    else if (chkUser($user)) { 
     echo "Username and password do not match"; 
    } 
    //Or else return that username doesn't exist 
    else { 
     echo "Username does not exist"; 
    } 
} 
?> 
+0

기능 배치에 관한 문제가 해결되어 이제는 오류 메시지가 제대로 작동하지만 쿠키 및 리디렉션 설정은 발생하지 않습니다. 왜 그럴지 모른다고 생각 해요? – amthomas2112

+0

수정 : 쿠키 설정이 작동합니다. 이제는 성공에 대한 리디렉션을 제외한 모든 기능이 작동합니다 ... 왜이 기능이 작동하지 않는지 알아 내려고 지금 속담 벽에 맞서 머리를 치자. – amthomas2112

+0

'function (result) {console.log (result);' 콘솔 로그에서 결과 값을 업데이트하십시오! –

1

전혀 리디렉션하고 싶지 않은 당신은 아약스 응답이 $('.error') 컨테이너에 추가했기 때문에 오류를 가지고 생각합니다. 이이 대화에 결과를 추가하고 AJAX를 호출하여, Krish 수출 R의 방법은 일을 얻기 위해 여러 번 시도 후 800 밀리 초

+0

이렇게하면 동일한 결과가 나타납니다. – amthomas2112

0

후를 닫

Submit: function() { 
       $.post("user.php", 
         { 
         username: $("#username").val(), 
         password: $("#pw").val() 
         }, 
         function(result) { 
          if(result=='success'){ 
           $("#login_dialog").append(result); 
           setTimeout(function(){ 
            $("#login_dialog").dialog("close"); 
           },800); 
          }else{ 
           $('.error').html(result); 
          } 
         } 
        ) 
       }, 

당신에게 도움이 될 수 있습니다

별도의 PHP 페이지의 코드와 window.location 통해 성공 리디렉션, 나는 그 window.location 그 자체로 AJAX 호출의 성공에 작동하지 않는 것으로 나타났습니다. 결국 window.location.assign(data)을 사용하는 비슷한 문제에 대해 this answer이 발견되어 완벽하게 작동했습니다.

왜이 다른 방법이 필요한지 정확히 이해할 수 없지만 리디렉션 문제를 해결하기 위해 노력했습니다. 대답 한 모든 사람들에게 감사드립니다. 나는 솔루션에 가장 가까운 것이었기 때문에 Krish R의 대답을 받아 들였습니다.

관련 문제