AJAX 对 HTML 表单的 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）函数，如下所示：

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。有人可以向我解释为什么会这样，更重要的是，我该如何解决？提前致谢。

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