Thymeleaf：使用 Ajax 刷新值

Posted 2023-02-26

【中文标题】Thymeleaf：使用 Ajax 刷新值

【英文标题】：Thymeleaf: Refresh value with Ajax

【发布时间】：2018-07-31 04:28:38

【问题描述】：

我在 Thymeleaf 模板中有这段代码。

 <div class="alert_counter" th:classappend="$numDeviceEventsWithAlarm>0 ?  show_info">
                                    <span th:text="$numDeviceEventsWithAlarm">$numDeviceEventsWithAlarm</span>
                                </div>

是否可以使用 Ajax 而没有 F5 刷新值 numDeviceEventsWithAlarm ？？

【问题讨论】：

Thymeleaf 在服务器端呈现您的 html 页面，并且在生成内容后没有任何作用。如果你想用 Ajax 来更新网页上的东西，你可以用 javascript / jQuery 来完成。

正如@KedarJoshi 所述以及thymeleaf homepage 中提到的：“Thymeleaf 是一个现代的服务器端 Java 模板引擎，适用于网络和独立环境。” 。所以答案是否定的，您不能更改 $numDeviceEventsWithAlarm 变量，而是给封闭的 span 一个 ID，稍后使用纯 JS 或您选择的 JS 库更改 span 的内容。

【参考方案1】：

您可以使用该功能仅渲染 Thymeleaf 视图的片段。

首先给出要更新的标记的sn-p id：

<span id="eventCount" th:text="$numDeviceEventsWithAlarm"></span>

然后我们可以在控制器中创建一个Spring请求映射：

@RequestMapping(value="/event-count", method=RequestMethod.GET)
public String getEventCount(ModelMap map) 
    // TODO: retrieve the new value here so you can add it to model map
    map.addAttribute("numDeviceEventsWithAlarm", count);

    // change "myview" to the name of your view 
    return "myview :: #eventCount";

请参阅 Thymeleaf 手册中的 Specifying fragments in controller return values，以更好地了解指定要呈现哪个片段的返回。

创建一个 JavaScript 函数以使用 ajax (jQuery style) 更新值：

function updateEventCount() 
    $.get("event-count").done(function(fragment)  // get from controller
        $("#eventCount").replaceWith(fragment); // update snippet of page
    );

然后在需要更新值的时候调用这个函数。

【讨论】：

嗨！你能解释一下什么是“.done(function(fragment) // get from controller”吗？我很困惑。我应该用什么替换 function(fragment) 吗？

@SHASHA .done(function(fragment) // 从控制器获取”？我很困惑。我应该替换 function(fragment) 是对端点 /event-count 的 ajax 调用跨度>