javascript - onclick刷新div内容

Question

我遇到这个问题:

当用户单击按钮时，我想重新加载这个用 Java Spring 制作的 div:

<div id="trigger-who" class="page" th:fragment="triggerWho">
        <h3><strong class="accent">Which</strong> service will activate the rule?</h3>

        <ul id="trigger" class="list list-horizontal">
            <li th:each="channel: ${channels}"
                th:with="service=${channel.getService()}"
                th:if="${channel.getService().getTriggers().size() != 0}">
                <figure
                    class="service-box"
                    data-trigger="trigger"
                    th:attr="data-service-name=${service.getName()},data-service-connected=${channel.isConnected()}">
                    <img th:id="${service.getName()}" th:src="@{/img/} + ${service.getName()} + '.png'" />
                    <figcaption th:text="${service.getName()}"></figcaption>
                </figure>
            </li>
        </ul>
        <br clear="all" />
</div>

特别是，我想更新属性“data-service-connected”。

我尝试过 load() 方法:

$("#trigger-who").load(location.href + "#trigger-who"),

但是效果不太好。它将整个页面放入 div 中。

有人有什么建议吗？

预先感谢您的回答。

Answer 1

您想要加载页面的“片段”。

使用这个:
$("#trigger-who").load(location.href + "#trigger-who")

整个页面已加载:http://www.domain.com/#trigger-who
(#trigger-who 被视为地址中的哈希)。

在地址和“哈希部分”之间使用空格表示它是一个 jQuery 选择器。
$("#trigger-who").load(location.href + "#trigger-who")

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

参见documentation .