AJAX 不接收 POST 变量

Question

我已经阅读了至少 20 个类似的问题，但无法弄清楚我的代码有什么问题。

我有一个如下所示的登录表单：

<div class="login-form">
    <form class="login-form-container" action="./" method="post" autocomplete="off">
        <input id="login-user" type="text" placeholder="&#xf007; Username"/>
        <input id="login-pass" type="password" placeholder="&#xf023; Password"/>
    <div class="login-button-container">
        <input id="login-button" type="submit" value="Log in"/>
    </div>
    </form>
</div>

我的 login.js 脚本如下：

$(document).ready(function(){
$("#login-button").click(function(e){
    var username = $("#login-user").val();
    var password = $("#login-pass").val();
    $.ajax({url: "../includes/index.php", //.js file is in a diff directory
        data: {'login':true,'name':username,'pwd':password},
        type: "POST",
        success: function(html) {    
            if (html=='true') {
             //window.location="dashboard.php";
             alert('success');
            }
            else {
                alert('failure');
            }
        }
    });
    return false;
    });
});

这应该被发送回“index.php”，其中包含一个单独的 php 文件，用于处理登录信息。这样做的原因是我可以在不刷新的情况下使用用户成功登录来更新页面。

我的另一个 php 文件只是检查帖子数据：

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    var_dump($_POST);
    if (isset($_POST['login']) && $_POST['login']) {
    } else if (isset($_POST['reg']) && $_POST['reg']) { //this is for registration, which will be used once this login is working
    } else {
        echo 'Neither login/reg were set';
    }

var 转储显示：

array(0) { }

所以没有接收到数据。但是，它显然到达了 php 页面。不知道怎么回事，有什么建议吗？

编辑：我想我会添加，在 login.js 的顶部添加一个带有用户名/密码的警报确实会打印输入的值。因此正在访问 login.js，并且可以在那里访问数据。但这并不止于此。

Edit2：这是我更新的 HTML 和 login.js 代码：

index.php:

<form class="login-form-container" action="./" method="post" autocomplete="off">
    <input id="login-user" type="text" placeholder="&#xf007; Username"/>
        <input id="login-pass" type="password" placeholder="&#xf023; Password"/>
        <div class="login-button-container">
            <input id="login-button" type="button" value="Log in"/>
        </div>
</form>

登录.js

$(document).ready(function(){
    alert(1);
$("#login-button").click(function(e){
    alert(0);
    //e.preventDefault();
    var username = $("#login-user").val();
    var password = $("#login-pass").val();
    $.ajax({url: "../includes/index.php",
        data: {'login':true,'name':username,'pwd':password},
        type: "POST",
        success: function(html) {    
            if (html=='true') {
             //window.location="dashboard.php";
             alert('success');
            }
            else {
                alert('failure');
            }
        }
    });
    return false;
});
});

Answer 1

解决办法是改变我的

$("#login-button").click(function(e){

到

$(document).on("submit",".login-form-container",function(e) {

它将处理表单提交，这包括按下按钮以及按回车键（理想情况）。

现在数据已成功发送，我可以处理实际的登录/注册 SQL，因此感谢 @Ashokkumar M. Prajapati 帮助得出 .js 脚本实际上并未在提交时触发（不是你们其他人没有帮助！）

Answer 2

请将type: "POST" 替换为method: "POST"
你在 jquery ajax 函数中提到它是错误的。

如果您未指定，默认为“GET”。因此，如果您同时检查了 $_POST 和 $_GET，那么您会在 $_GET 中找到您的数据。

尝试 var_dump($_REQUEST) 如果它没有显示任何内容，那么您的客户端没有向服务器发送数据。

另外，检查浏览器开发者控制台的网络面板。因此，您将知道哪些数据被传递到服务器。