未捕获的 SyntaxError：无效或意外的令牌弹簧启动答案

【问题标题】：Uncaught SyntaxError: Invalid or unexpected token spring boot未捕获的 SyntaxError：无效或意外的令牌弹簧启动
【发布时间】：2018-08-24 10:46:08
【问题描述】：

您好，我有 Spring Boot Web 应用程序，我正在尝试将非常简单的 javascript 脚本添加到我的 index.html 中，该脚本在单击按钮时会重定向到另一个 html。

这是我的 index.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Dashboard</title>        
        <link rel="stylesheet" th:href="@{/css/bootstrap.css}" href="../css/bootstrap.css"/> 
        <link rel="stylesheet" th:href="@{/css/style.css}" href="../css/style.css"/>    
    </head>
    <body>
        <div class="container">
            <h1 th:inline="text">My Custom CMS Dashboard</h1>

            <a href="/addNewPost"><button class="btn btn-primary block"> Add new Post </button></a>

            <table class="table posts">
                <tr th:each="post : ${posts}" class="post">
                    <td th:text="${post.title}" class="title"></td>
                    <td th:text="${post.text}" class="text"></td>
                    <td th:text="${post.user.username}" class="username"></td>
                    <td>
                        <button class="btn block" id="editPostButton" onClick="redirectToEditPost()"> Edit Post </button>
                    </td>
                    <td>
                        <input id="postId" th:text="${post.id}" type="hidden" style="display:none"/>
                    </td>
                </tr>
            </table>

        </div>

        <script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
        <script type="text/javascript" th:src="@{/js/editPost.js}"></script>
    </body>
</html>

这是我的 javascript 文件：editPost.js：

$(document).ready(function () {
    function redirectToEditPost(){
        window.location = '/editPost/' + $('input#postId').val();
    }
}

我不断收到此错误：Uncaught SyntaxError: Invalid or unexpected token

我很确定这是一些奇怪的错误（coughs JavaScript coughs），而不是实际的语法错误，因为我看到了类似的帖子，这些帖子有一些奇怪的问题，比如索引兑现.html 或类似的东西。

谁能帮我解决这个问题，因为我对 JavaScript 错误或调试 JavaScript 或与 JavaScript 相关的任何事情都不是很熟悉

我知道这可能是处理 Spring Boot 配置或 JavaScript 以外的东西，所以我要留下 spring-mvc 标签...

【问题讨论】：

标签： javascript jquery spring spring-mvc

【解决方案1】：

我认为你在你的脚本代码之后错过了);：-

$(document).ready(function () {
    function redirectToEditPost(){
        window.location = '/editPost/' + $('input#postId').val();
    }
});

【讨论】：

嗨，我认为这是问题所在，哈哈，该错误不再出现，但我的代码没有按照我的意愿执行，但这是另一个问题...

【解决方案2】：

将事件处理程序直接添加到按钮不是最佳做法。

保持按钮不变：

<button class="btn block" id="editPostButton"> Edit Post </button>

您的文档准备好了，然后可以像这样将事件处理程序添加到按钮，因为您已经在使用 jQuery：

$(document).ready(function () {
        $('#editPostButton').on('click', function () {
                window.location = '/editPost/' + $('input#postId').val();
        });
});

【讨论】：

嗯，谢谢，但另一个问题是没有获取 postId 输入值：/
如果你的隐藏输入有一个“值”属性，你能检查你的 DOM 吗？也 "style="display:none"" 不是真的必要，也许这是另一个问题。
试试 th:value= 而不是 th:text=
哇，感谢 Alen，th:value 填充了 input 元素的 value 属性，现在这个小脚本可以正常工作，非常感谢！我也是百里香菜新手。
感谢 Alen，我在这里找到了答案：stackoverflow.com/questions/19311511/… 我通过 css 类获取按钮元素 editPostButton 有点破解它，但它可以工作