未捕獲的SyntaxError：ajax呼叫中的令牌無效或意外

我有一個看起來像這樣的表格：

<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>

函式checkLoginfromcontroller.php將回傳一個帶有一個欄位“結果”的 json。如果用戶名/密碼組合正確，它將回傳 {"result": "success"}。如果用戶名/密碼組合不正確，它將回傳 {"result": <error_message>}，其中 <error_message> 可能類似于“您不能輸入空的用戶名”。你明白了。

問題是我收到“未捕獲的語法錯誤：無效或意外令牌”。瀏覽器說它位于我type: "GET"在 ajax 呼叫中的位置。這個例外也使得不會隱藏錯誤訊息的 div，所以我在用戶名和密碼欄位上方有一個空的紅色框（它不應該在那里，它應該只在用戶點擊登錄后出現用戶名/密碼無效的按鈕）。如果我洗掉 ajax 呼叫，我不再有例外，并且 div 被隱藏。我不知道如何解決它/為什么我得到這個例外。我嘗試將dataTypeajax 呼叫中的屬性指定為'json'，但這仍然不起作用。我嘗試將 ajax 呼叫更改為$.getJSON()打電話，我得到了同樣的例外（我知道他們做同樣的事情，但我越來越絕望）。怎么了？

uj5u.com熱心網友回復：

您的 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();
        });
    })

標籤：javascript php html jQuery 阿贾克斯

上一篇：檔案未在ajaxpostresponse.netcore上下載

下一篇：顯示從django資料庫到fullcalendar的事件