无需刷新页面即可登录

Question

我真的很熟悉 php 和 ajax，我正在阅读很多关于如何在不刷新页面的情况下进行登录的教程，这段代码不起作用我不知道为什么，我所做的是传递用户名和使用 ajax 输入密码，但是当我点击按钮时什么也没有发生。

但是我没有使用 ajax，而是将我的表单方向指向 checklogin.php 工作正常。

这是表单的代码，其中包括ajax代码：

<script type="text/javascript">
function validLogin(){
      var username=$('#username').val();
      var password=$('#password').val();
      var dataString = 'username='+ username + '&password='+ password; 
      $.ajax({
      type: "POST",
      url: "checklogin.php",
      data: dataString,
      cache: false,
      success: function(result){
               var result=trim(result);
               $("#flash").hide();
               if(result=='correct'){
                       window.location='index.php';
               }else{
                     $("#errorMessage").html(result);
               }
      }
      });
}

function trim(str){
     var str=str.replace(/^\s+|\s+$/,'');
     return str;
}
</script>    

  <label></label><input type="text" name="username" id="username" value="<?php echo $submitted_username; ?>"  placeholder="Username...."/> 
  <label></label><input type="password" name="password" id="password" value="" placeholder="Password...."/><br>
 <button name="submit" value="Submit" class="button" onClick="validLogin()">Login </button> 

此 ID 是 checklogin.php 代码

<?php 

    require("finalphp/connect.php"); 

    $submitted_username = ''; 

        $query = " SELECT id, username, password, salt FROM users WHERE username = :username "; 

        $query_params = array( 
            ':username' => $_POST['username'] 
        ); 

        try 
        {  
            $stmt = $db->prepare($query); 
            $result = $stmt->execute($query_params); 
        } 
        catch(PDOException $ex) 
        {  
            die("Failed to run query: " . $ex->getMessage()); 
        } 

        $login_ok = false; 

        $row = $stmt->fetch(); 
        if($row) 
        {  
            $check_password = hash('sha256', $_POST['password'] . $row['salt']); 
            for($round = 0; $round < 65536; $round++) 
            { 
                $check_password = hash('sha256', $check_password . $row['salt']); 
            } 

            if($check_password === $row['password']) 
            {  
                $login_ok = true; 
            } 
        } 

        if($login_ok) 
        {    
            unset($row['salt']); 
            unset($row['password']);  
            $_SESSION['user'] = $row; 

            header("Location: index.php"); 
            die("Redirecting to: index.php"); 
        } 
        else 
        {  
            print("Login Failed.");  
            $submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8'); 
        }      
?> 

Answer 1

尝试在checklogin.php 中返回一个 json，如下所示：

echo json_encode(
    array(
        'success' => $login_ok
    )
);

现在你可以在你的 javascript 中访问这个 json：

$.ajax({
    type: "POST",
    url: "checklogin.php",
    data: dataString,
    dataType: 'json',
    success: function (result) {
        console.log(result); // debug in console
        if (result.success) {
            window.location = 'index.php';
        } else {
            $("#errorMessage").html('something went wrong);
        }
    }
});

Answer 2

您没有为 ajax 请求返回正确的响应。 您正在检查； if(result=='correct')但没有这样的响应。 你也在做重定向。 更新您的代码，例如；

if($login_ok) 
{    
    unset($row['salt']); 
    unset($row['password']);  
    $_SESSION['user'] = $row; 

    echo "correct";
}