javascript - Thymeleaf:使用 Ajax 刷新值

Question

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

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

是否可以使用 Ajax 且不使用 F5 来刷新值 numDeviceEventsWithAlarm ??

Answer 1

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

首先给出您想要更新id的标记片段:

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

然后我们可以在 Controller 中创建 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";
}

参见Specifying fragments in controller return values在 Thymeleaf 手册中，可以更好地理解指定要渲染哪个片段的返回。

创建一个 JavaScript 函数来更新值 ajax (jQuery style) :

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

然后当需要更新值时调用这个函数即可。