使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用答案

【问题标题】：Submitting Form with jQuery AJAX to the required PHP POST request handler is not working使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用
【发布时间】：2020-01-22 12:04:57
【问题描述】：

每当我使用 jquery ajax 向 PHP api 提交表单时，表单都不会提交到所需的 post 请求处理程序。但是当我基本上提交表单时，我的意思是不使用 javascript 或 jquery 提交表单，它会重定向到带有 json 响应的 php 页面。

注意这里的 CORS 没有问题，CORS 很好，因为我在 api 中允许跨站点请求。

下面是我的 login.html 文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/css/style.css">
    <script src="./assets/js/jquery-3.4.1.min.js"></script>
    <title>User Login Page</title>
</head>

<body>
    <div class="header">
        <h2>Login</h2>
    </div>

    <form action="http://localhost/auth-app/server.php" method="post">
        <div class="input-group">
            <label for="">Email</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="input-group">
            <label for="">Password</label>
            <input type="password" name="password" id="password" required>
        </div>
        <div class="input-group">
            <input type="submit" value="Login" name="login" class="submit-btn">
        </div>
        <p>
            Not yet a member? <a href="register.html">Register</a>
        </p>
    </form>

    <script>
        $(document).ready(function () {
            // submit login form with ajax
            $('form').submit(function (event) {
                /* stop form from submitting normally */
                event.preventDefault();
                $(".submit-btn").click(function () {
                    $.post("http://localhost/auth-app/server.php", {
                        email: $('#email').val(),
                        password: $('#password').val()
                    },
                        function (data, status) {
                            const json = $.parseJSON(data);
                            console.log("Data: " + typeof(json) + "\nStatus: " + status);
                        });
                });
            });
        });


    </script>
</body>

</html>

注意我想要的是能够使用 jquery ajax 将表单提交到 必需的 PHP 发布请求处理函数。

下面是我的 server.php api 文件。


$errors = array();

// login
if (isset($_POST['login'])) {
    $email = $db->real_escape_string($_POST['email']);
    $password = $db->real_escape_string($_POST['password']);

    if (empty($email)) {
        array_push($errors, 'Email is required');
    }
    if (empty($password)) {
        array_push($errors, 'Password is required');
    }

    if (count($errors) == 0) {

                // log user in
                $data = ['success_login' => 'true'];
                header('Content-type: application/json');
                echo json_encode(null);
        } else {
            array_push($errors, 'The email or password is incorrect');
            // after entering wrong credentials
            $data = ['success_login' => 'false'];
            header('Content-type: application/json');
            echo json_encode($data);
        }
}

在调试控制台中，我收到以下错误。注意这只是证明 post 请求没有到达 api 文件中的 php post request 处理程序。

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

我期望在控制台中得到的是 json 数据，如下所示：

success_login   "true"

！重要信息： 我对 php 不是很有经验，但我注意到在不使用任何 javascript（例如 jquery 或 ajax）的情况下提交表单时，表单会成功提交，因为提交按钮的名称（例如 <input type="submit" value="Login" name="login">）与 $_POST['login'] 中的名称相同。但是在技术上使用 ajax 提交表单时，您不会使用该按钮来提交。

那么我该如何解决这个问题呢？谢谢你用爱发帖。

【问题讨论】：

那么检查发送的其他参数之一，而不是登录按钮？
您尝试验证参数的方式是错误的，顺便说一句。您正在尝试访问 $_POST['email']，然后再检查是否设置了 that。
因为您看到 SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 JSON 数据。 Ajax 和 PHP 工作，响应返回到客户端。也许，“回声 json_encode(null);” on count($errors) == 0。应该是 echo json_encode($data);
login.php 中多了一个}。只需删除最后一个}。 :-)
@Jagveer 一个额外的} 就在这里，但不在原始代码中。我一定是不小心把它放在这里了！

标签： javascript php jquery html ajax

【解决方案1】：

试试下面的代码

      $(document).ready(function () {
        $('form').submit(function (event) {
        event.preventDefault();
        $(".submit-btn").click(function () {

         name: $('#email').val(),
         password: $('#password').val()

        $.ajax({
            type: 'post',
            url: 'http://localhost/auth-app/server.php',
            data: {
                name: name,
                password : password,
                action: 'login'
            },
            success: function(response) {

            }
        })
    });
    });
    });

【讨论】：

【解决方案2】：

您不需要声明单击按钮事件，因为您已经在使用表单提交按钮事件。此外，在 $.post 中添加 login 键作为参数值，因为您正在检查 login.php 文件中的 isset 值。

另外，请注意您的 login.php 文件中有额外的右大括号 "}"

【讨论】：