jQuery / ajax登录表单失败（如果/其他似乎在ajax中不起作用）

Question

我是jQuery新手。 我正在为我的网页编写一个登录表单。 我想让我的登录页面显示登录失败，如果用户的用户名或密码错误，并且如果他们成功登录，则允许他们进入index.php。 它在没有jQuery的情况下完美运行。 但是，使用jQuery，该脚本似乎通过if and else脚本运行，并且不会将我的网页重定向到index.php。这是login.js

$(document).ready(function(){
$("#ack").css('display', 'none', 'important');
 $("#submit").click(function(){

      username=$("#username").val();
      password=$("#password").val();
      if(username==''||password==''){
          $("#ack").css('display','inline','important');
          $("#ack").html("Please enter your username and password!");
      }
      else{


      $.ajax({

       type: "POST",       
       url: "User/login.php",
       data: "username="+username+"&password="+password,

       beforeSend: function(){
        $("#ack").css('display', 'inline', 'important');
        $("#ack").html("Loading...");
       },
       success: function(html){

        if(html==='login'){
         $("#ack").css('display', 'inline', 'important');
         $("#ack").html("<font color='green'>log in</font>");
         window.location="index.php";
        }
        else{
        $("#ack").css('display', 'inline', 'important');
        $("#ack").html("<font color='red'>Wrong username or password!</font>"+html); 
        //I tried to output the html and found that, with 'return false;'
        //below, it will not redirect and finally shown that
        //Wrong username or password!login (if the username and password are correct
        //if i removed the return, the sentence will still be seen with a quick refresh 
        //It doesn't depend on the username and password correct or not. 
        //I will be redirected to my index.php if they are correct.

        }
       }
      });


     }
    return false;
  });
});

这是loginform.php：

 <form action="./" method="post" id="loginForm">
    <div class="container">
        <label><b>Username:</b></label>
        <input type="text" placeholder="Enter Username" name="username" id="username" required>
        <label><b>Password:</b></label>
        <input type="password" placeholder="Enter Password" name="password" id="password" required>
        <!--<button class="w-button" id="submit" name="submit">login</button>-->
        <input type="submit" value="login" class="w-button" id="submit">
        <input type="reset" class="w-button">       
    </div>
</form>

这是login.php：

 <?php 
require("common.php"); 
$submitted_username = ''; 
if(!empty($_POST)) 
{ 

    $query = " 
        SELECT 
            id, 
            username, 
            password, 
            salt, 
            email 
        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; 
        echo("login");
    } 
    else 
    { 
        $submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8'); 
        echo("nologin");
    } 
} 
 ?> 

Answer 1

您错过了这样的变量名之前添加var

username=$("#username").val();
password=$("#password").val();

它应该像下面这样：

var username = $("#username").val();
var password = $("#password").val();

另外，您的数据网址不正确，例如以下：

data: "username="+username+"&password="+password,

它应该是data: {username:username, password:password},

您错过了e.preventDefault(); 在$("#submit").click(function(e){

您的更正代码如下：

<script>
$(document).ready(function(){
    $("#ack").css('display', 'none', 'important');

    $("#submit").click(function(e){
        e.preventDefault();
        var username = $("#username").val();
        var password = $("#password").val();

        if(username=='' || password==''){
            $("#ack").css('display','inline','important');
            $("#ack").html("Please enter your username and password!");
        } else {

            $.ajax({
                type: "POST",       
                url: "User/login.php",
                data: {username:username, password:password},
                dataType: 'html',
                beforeSend: function(){
                    $("#ack").css('display', 'inline', 'important');
                    $("#ack").html("Loading...");
                },
                success: function(html){
                    if(html==='login'){
                        $("#ack").css('display', 'inline', 'important');
                        $("#ack").html("<font color='green'>log in</font>");
                        window.location="index.php";
                    }
                    else{
                        $("#ack").css('display', 'inline', 'important');
                        $("#ack").html("<font color='red'>Wrong username or password!</font>"+html); 
                        //I tried to output the html and found that, with 'return false;'
                        //below, it will not redirect and finally shown that
                        //Wrong username or password!login (if the username and password are correct
                        //if i removed the return, the sentence will still be seen if the username and password correct or not. 
                        //I will be redirected to my index.php if they are correct.
                    }
                }
            });
        }
        return false;
    });
});
</script>