未捕獲的語法錯誤：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();
        });
    })