未捕获的语法错误：ajax 调用中的无效或意外标记

Question

我有一个看起来像这样的表格：

<form id="login_form" class="border shadow p-3 rounded" method="post" style="width: 450px;">
        <h1 class="text-center p-3">LOGIN</h1>

        <div id="error_box" class="alert alert-danger" role="alert"> </div>

        <div class="mb-3">
            <label for="username" class="form-label">User name</label>
            <input type="text" class="form-control" name="username" id="username">
        </div>

        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" name="password" class="form-control" id="password">
        </div>

        <button type="submit" class="btn btn-primary">LOGIN</button>
</form>

当我单击登录按钮时，我想检查给定的用户名和密码是否在数据库中。 如果是，我想转到另一个页面。 如果它们不是，我将错误消息文本添加到上面的 ID 为“error_box”的 div 并使其可见（它最初是不可见的）。 这是 jquery 代码的样子：

<script>
        $(document).ready(function () {
            const errorBox = $("#error_box");
            errorBox.hide();
            $("form").on('submit', function (event) {
                errorBox.empty();
                $.ajax({
                    type: "GET",
                    url: "controller/controller.php",
                    data: {action: "checkLogin", username: "<?=$_POST['username']?>", password: "<?=$_POST['password']?>"},
                    success: function (jsonResponse) {
                        const result = $.parseJSON(jsonResponse)["result"];
                        if (result === "success") {
                            window.location.href = "home.php";
                        } else {
                            errorBox.show();
                            errorBox.append(result);
                        }
                    }
                });
                event.preventDefault();
            });
        })
</script>

来自controller.php checkLogin返回带有一个字段“结果”的 json。 如果用户名/密码组合正确，它将返回 {"result": "success"}。 如果用户名/密码组合不正确，它将返回 {"result": <error_message>}，其中 <error_message> 可以是类似“您不能输入空用户名”的内容。 你明白了。

问题是我收到“未捕获的语法错误：无效或意外的标记”。 浏览器说它在我type: "GET" 。 这个异常也使得将有错误消息的 div 不被隐藏，所以我在用户名和密码字段上方有一个空的红色框（它不应该在那里，它应该只在用户点击登录后出现用户名/密码无效的按钮）。 如果我删除 ajax 调用，我将不再有异常，并且 div 会被隐藏。 我不知道如何解决它/为什么我得到这个异常。 我尝试在 ajax 调用中将dataType属性指定为'json' ，但这仍然无效。 我尝试将 ajax 调用更改为$.getJSON()调用，但我遇到了同样的异常（我知道他们做同样的事情，但我越来越绝望了）。 怎么了？

Answer 1

在您的 ajax 表单中有 php 语法，问题出在您从输入中获取用户名和密码的那些行中。 尝试使用 jquery 或 javascript 获取输入值。

你的脚本应该是这样的

<script>
    $(document).ready(function () {
        const errorBox = $("#error_box");
        errorBox.hide();
        $("form").on('submit', function (event) {
            errorBox.empty();
            $.ajax({
                type: "GET",
                url: "controller/controller.php",
                data: {action: "checkLogin", username: $('#username').val(), password: $('#password').val()},
                success: function (jsonResponse) {
                    const result = $.parseJSON(jsonResponse)["result"];
                    if (result === "success") {
                        window.location.href = "home.php";
                    } else {
                        errorBox.show();
                        errorBox.append(result);
                    }
                }
            });
            event.preventDefault();
        });
    })