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" );
});