AJAX为HTML表单调用PHP文件无效 - AJAX Call to PHP File for HTML Form Not Working

我有一个使用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）函数，如下所示：

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的组合来（据说）阻止表单提交。这在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.";
}
?>

当我尝试执行此代码时，它显示的唯一警报是test1。有人能向我解释一下为什么会这样，更重要的是，我该如何解决它吗？提前谢谢。

在浏览器的调试面板中查看您的网络请求，看看它是否发送了您认为的内容，在PHP中放入一些调试语句，看看哪些内容受到了影响，哪些没有受到影响。

在这种情况下，我认为您可能在javascript中的alert("test1")之前缺少$('login-login-password')上的.val()。

未定义event。这将是一个问题，表格将提交。回调中的preventDefault是无用的，因为函数已经完成。

1）php文件的名称为login.php

2）您请求发布的url是用户名不正确.php

因此：

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

警报测试1是唯一一个因为发布失败而出现的测试。如果发生失败事件，您可能会缓存错误。

尝试，如果你想测试：

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