更新 Thymeleaf 中的内容而不重新加载整个页面

Question

我想更新 div“输出”的内容而不重新加载整个页面。当用户输入内容并点击运行按钮时，服务器将在 div“输出”上输出评估结果。但以下代码仅将 div“输出”放在浏览器上。另一页也不见了。我做错了什么？

\n

<body>\n    <div class="container mx-auto">\n        <div th:insert="fragments/body :: navigation (true, ${spieler.name}, ${spieler.punkte}, ${spieler.level})"></div>\n    \n        <div class="d-flex justify-content-center">\n            <label class="text-center mt-4" id="thetext">Du liebst Abenteuer und m\xc3\xb6chte endlich reisen.<br>\n                Du hast ein bisschen Geld und das reicht f\xc3\xbcr ein Ticket zur n\xc3\xa4chsten Insel.<br>\n                Ungl\xc3\xbccklicherweise ist dein Schiff in einem Sturm gesunken. <br>\n                Du hat gl\xc3\xbcck, an einen Strand zu landen. <br><br>\n                Jetzt musst du die Herausforderungen mit deinen SQL-Kenntnissen meistern.<br>\n                Je schneller du die Probleme l\xc3\xb6st, desto besser ist dein Ranking.<br><br>\n                Viel Spa\xc3\x9f !!!<br>\n            </label>\n        </div>\n    \n        <div class="d-flex justify-content-center">\n            <input id="startButton" onclick="nachsteFrage()" class="btn-secondary mt-4"\n                   type="button" value="Weiter">\n        </div>\n    \n        <form method="post"  th:action="@{/level1-answer}" th:object="${answer}">\n            <div class="form-group">\n                <input type="text" class="form-control mt-4" id="codeArea" name="antwort" th:field = "*{SQL}"\n                          rows="3" placeholder="Hier steht dein Code ...">\n                <br>\n                <div class="d-flex justify-content-center">\n                    <button onclick="updateOutput()" class="btn-secondary mt-4"\n                             id="ausfuehrenBtn">run</button>\n                </div>\n            </div>\n        </form>\n        <div id="output" style="overflow:scroll; height:400px;">\n             <span th:text = "${evaluation}"></>\n        </div>\n    \n    </div>\n    \n    <script th:inline="javascript">\n        function updateOutput() {\n            $.get("output").done(function(fragment) { \n                $("#output").replaceWith(fragment);\n            });\n        }\n    </script>\n</body>\n

\n

控制器

\n

@RequestMapping(value="/level1-answer", method=RequestMethod.POST)\npublic String postSQL (Model map, @ModelAttribute("answer") Answer answer) {\n    map.addAttribute("evaluation",answer.getSQL() + "  this is correct or incorrect"); \n    return "level1 :: #output";\n}\n

\n

html 文件位于 templates/level1.html 中

\n

Answer 1

这是一个非常基本的演示，展示了一种方法。

我从主网页开始testajax.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Test Ajax Fragment</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <h3>A Permanent Heading</h3>
        <div id="output">
            Some initial text displayed here. This will be replaced.
        </div>
        <br>
        <button onclick="updateOutput()" 
                id="ausfuehrenBtn">run</button>
        <script>
            function updateOutput() {
                $.post("test_ajax_frag").done(function (fragment) {
                    console.log(fragment);
                    $("#output").replaceWith(fragment);
                });
            }
        </script>
    </body>
</html>

请注意，此处没有<form>，因为我们不会提交任何表单数据 - 稍后我们将使用 Ajax 请求。

用于显示此页面的控制器：

@RequestMapping(value="/test_ajax", method=RequestMethod.GET)
public String sendHtml(Model map) {
    //map.addAttribute("foo", "bar");
    return "testajax";
}

这是一个简单的GET处理程序，用于显示初始页面。在这种情况下，我什至没有任何具体Model数据，只是为了使演示保持简单。

Thymeleaf 片段模板是testajaxfragment.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <body>
        <div th:fragment="test_frag">
            <div id="output">
                Some replacement content.
            </div>
        </div>
    </body>
</html>

主页包含一个 Ajax 调用，该调用在单击按钮时执行：

$.post("test_ajax_frag")

我们需要一个单独的控制器：

@RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
public String sendHtmlFragment(Model map) {
    //map.addAttribute("foo", "bar");
    return "testajaxfragment :: test_frag";
}

在本例中，我选择在 Ajax 调用中使用 POST 请求 - 因此控制器也必须是POST处理程序。

当控制器运行时，它会将 HTML 片段返回给调用它的 JavaScript 函数。然后该函数替换outputdiv：

$("#output").replaceWith(fragment);

这是一种相当粗略的方法，但显示了您在问题和评论中询问的技术。