HTML表單的AJAX對PHP文件的調用不起作用

Question

我有一個使用HTML創建的登錄表單，如下所示：

<div class= "form-header">Login</div>
    <div class= "error-message" id= "login-error-exists"></div>
        <form action= "login.php" method= "POST" onsubmit= "loginCheckIncorrect()">
            <div class= "form-field">
                <div class= "form-text">
                    username:
                </div>
                <input type= "text" class= "login-textbox" id= "login-login-username" name= "loginLoginUsername">
            </div>
            <div class= "form-field">
                <div class= "form-text">
                    password:
                </div>
                <input type= "password" class= "login-textbox" id= "login-login-password" name= "loginLoginPassword">
            </div>
            <input type= "submit" value= "Login" class= "signup-confirm">            
        </form>

如您所見，它是通過POST發送到login.php的簡單形式。 提交此表單后，它會調用一個名為loginCheckIncorrect()的JavaScript函數（使用jQuery loginCheckIncorrect() ，如下所示：

function loginCheckIncorrect() {
    "use strict";
    var loginLoginUsername = $("#login-login-username").val(), loginLoginPassword = $("#login-login-password");
    alert("test1");
    $.post('usernameIncorrect.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
        $("#login-error-exists").html(data);
        alert("test2");
        event.preventDefault();
        return false;
    });
    alert("test3");
    event.preventDefault();
    return false;
}

如您所見，此函數創建變量以存儲在每個文本框中輸入的用戶名和密碼的值。 它發出警報（調試），然后使用jQuery.post函數將變量發送到PHP文件，這將在下面顯示。 然后（應該）將PHP文件發送回的數據回顯到HTML表單中的錯誤div中。

然后，它調用警報（更多調試），並使用event.preventDefault()的組合，並return false以（據說）停止提交表單。 在發布功能之后重復此步驟。

這是我的PHP代碼：

<?php
header("X-XSS-Protection: 1");

include("connect.php");


$username = mysqli_real_escape_string($con, $_POST["loginLoginUsername"]);
$password = mysqli_real_escape_string($con, $_POST["loginLoginPassword"]);

echo "<script>alert('test');</script>";

$sql = mysqli_query($con, "SELECT * FROM main WHERE username='$username' and password='$password'");
$count = mysqli_num_rows($sql);

if ($count == 1) {
    echo "";
    $_SESSION["username"] = $username;
    $_SESSION["password"] = $password;
} else {
    echo "username and/or password is incorrect.";
}
?>

當我嘗試執行此代碼時，它顯示的唯一警報是test1 。 有人可以向我解釋為什么這樣，更重要的是，我該如何解決？ 提前致謝。

Answer 1

在瀏覽器的調試面板中查看您的網絡請求，看看它是否正在發送您所認為的信息，在您的PHP中放入一些調試語句以查看被擊中和未被擊中。

在這種情況下，我認為您可能在JavaScript中的alert("test1")之前缺少$('login-login-password')上的.val() 。

Answer 2

沒有定義event 。 那將是一個問題，表格將提交。 由於該函數已經完成，因此回調中的preventDefault是無用的。

Answer 3

1）php文件的名稱是login.php

2）您請求發布的網址是usernameIncorrect.php

因此：

$.post('login.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
    $("#login-error-exists").html(data);
    alert("test2");
    event.preventDefault();
    return false;
});

警報test1是唯一出現的警報，因為發布失敗。 可能帶有失敗事件，您可能已經緩存了該錯誤。

如果要測試，請嘗試：

$.post('wrongUrl.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
    $("#login-error-exists").html(data);
    alert("test2");
    event.preventDefault();
    return false;
})
.fail(function() {
    alert( "error" );
});