Uncaught SyntaxError: Invalid or unexpected token in ajax call

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>

当我点击登录按钮时，我想检查给定的用户名和密码是否在数据库中。如果是，我想转到另一个页面。如果不是，我将错误消息文本添加到上面的 div，ID 为“error_box”，并使其可见（最初是不可见的）。这是 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 将 return 一个带有一个字段“结果”的 json。如果 username/password 组合正确，它将 return {"result": "success"}。如果 username/password 组合不正确，它将 return {"result": }，其中可以是类似“您不能输入空用户名”。你明白了。

问题是我收到“未捕获的语法错误：无效或意外的标记”。浏览器说它在 ajax 调用中我有 type: "GET" 的那一行。此异常还使 div 的错误消息不会被隐藏，所以我在用户名和密码字段上方有一个空的红色框（它不应该在那里，它应该只出现在用户之后单击无效 username/password 的登录按钮）。如果我删除 ajax 调用，我将不再有异常，并且 div 会被隐藏。我不知道如何解决 it/why 我得到这个异常。我尝试将 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();
        });
    })

Uncaught SyntaxError: Invalid or unexpected token in ajax call

Uncaught SyntaxError: Invalid or unexpected token in ajax call

html

javascript

php

ajax

jquery