Javascript HTML表单对PHP文件的AJAX调用不起作用

我使用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>

如您所见，此函数创建变量以存储在每个文本框中输入的用户名和密码的值。它发送一个警报（调试），然后使用

jQuery.post

函数将变量发送到PHP文件，我将在下面展示。然后，它（应该）将从PHP文件返回的数据回送到HTML表单中的error div中

然后，它调用一个警报（更多调试），并使用

event.preventDefault（）

和

return false

的组合来（假定）阻止表单提交。这在post功能之后重复

这是我的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.";
}
?>

---

在浏览器的调试面板中查看您的网络请求，查看它是否发送了您认为是的内容，在PHP中添加一些调试语句，查看哪些内容被命中，哪些没有被命中

在这种情况下，我认为您可能在javascript中的
警报（“test1”）
之前缺少
$（'login-login-password'）
上的
.val（）
。
没有定义
事件。这将是一个问题，表格将提交。回调中的默认值是无用的，因为函数已经完成。
1）php文件的名称是login.php

2） 您请求发布的url是usernameError.php

因此：

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

由于post失败，只有警报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" );
});

哇，我现在觉得自己像个白痴。令人惊讶的是，代码的一小部分会导致整个程序失败。谢谢，伙计。是的，这就是为什么你会非常仔细地跟踪你的步骤，并寻找任何不寻常的东西——在这种情况下，你会看到
loginLoginPassword
在请求中总是空的。正如@epascarello所指出的，
event.preventDefault（）
如果没有事件对象就无法工作。jQuery将一个事件对象作为第一个参数传递，因此只需将其添加到：
函数loginCheckIncorrect（event）
我不完全理解您的意思。
event.preventDefault（）
对我来说运行良好，没有将事件对象作为参数传入。事实上，当我在中添加时，它导致了一个错误。为什么会这样？我不知道你为什么会出错，而且我现在是手机用户，所以我无法调查。但它可能会起作用，因为
return false
做了同样的事情（但不推荐）。另外，$.post（）调用将无法取消提交，因为它是异步的，当请求返回时，表单将已提交。在这一切按你所希望的那样运作之前，你可能需要做更多的重组。是的，这正是发生在我身上的事情。我将如何重新构造它，以便post call能够为我停止表单？我的下一步是添加一个if语句，说明是继续登录到login.php还是显示错误消息。我是否应该将其作为另一个问题发布？OP似乎有一个单独的脚本（usernameIncorrect.php），它在提交到login之前检查用户名。php“OP似乎”是主观的。客观地说，关于php文件名，我们唯一的信息是“login.php”，因此我的结论是：很抱歉，赫克托给我们带来了困惑。我确实有一个单独的文件名为
usernameError.php
；这就是我向您展示的PHP代码
login.php
在验证用户名是否在数据库中后发送到。哦，没问题，Jared。这些事情发生了：）我不太高兴的是@cincodenada的否决票。我试着取消你的否决票，但现在这么做已经太晚了。否决票主要是因为你给出了一个基于假设的明确答案，但这些假设没有得到很好的支持，结果是错误的。如果答案更具试探性（“你真的有两个独立的PHP文件吗？”），我不会投反对票。
$.post('wrongUrl.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
    $("#login-error-exists").html(data);
    alert("test2");
    event.preventDefault();
    return false;
})
.fail(function() {
    alert( "error" );
});