Question

我正在开发一个项目，我试图每隔30秒重新加载div而不重新加载整个页面 -

下面是我的JSP文件(dataInfo.jsp)中的div，我想每30秒重新加载div container而不重新加载整页。

<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">
        <c:forEach var="e" items="${testing.data}">
            <div class="component">
                <h3>
                    For
                    <c:out value="${e.key}" />
                </h3>
                <table id="tabDes" style=''>
                    <thead>
                        <tr>
                            <th>Machine Name</th>
                            <th>Fresh 95</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="m" items="${e.value}">
                            <tr>
                                <th>${m.machines}</th>
                                <td class="color-changer">${m.Fresh 95}</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </c:forEach>
    </div>
    <div class="footer">Some Value Here</div>
</body>

以下是我控制器中的方法 -

@RequestMapping(value = "testOperation", method = RequestMethod.GET)
public Map<String, Mapping> testOperation() {

    final Map<String, Mapping> model = new LinkedHashMap<String, Mapping>();

    // .. some code here

    Mapping mappings = Utils.getData(machines);

    model.put("testing", mappings);
    return model;
}

所以在浏览器上，我正在点击 - http://some.host.com:8080/web/testOperation，然后它会向我显示浏览器上JSP文件的实际内容。

现在下面是我用来每30秒加载div container的jquery脚本

<script type="text/javascript">
    $(document).ready(function(){
        var auto_refresh = setInterval(
        function ()
        {
        $('.container').html('');
        $('.container').load('dataInfo.jsp').fadeIn("slow");
        }, 30 * 1000);

    });
</script>

现在我面临的问题是，如果我每30秒重新加载container div，那么我的标题div和footer div，它们每次都会被追加，我不知道该如何解决这个问题？有什么想法吗？

我的最终目标是每30秒加载container div而不重新加载页面而不附加任何其他div。那就是

Answer 1

好吧，因为你每次都获得整个dataInfo文件（页眉，页脚和所有文件）。

将文件分开：

dataInfo.jsp将包含内容的页眉，页脚和容器div

<body>
<div id='headerDivDash'>
    <h1 id='topHeaderDash'>
      <!-- some image here -->
    </h1>
</div>
<div id="vertical-list" style='display: block; list-style-type: none;'>
    <ul class="resp-tabs-list">
        <a href="_blank"><li>Test 1</li></a>
        <br />
        <a href="_blank"><li>Test 2</li></a>
    </ul>
</div>

<div class="container">

</div>
<div class="footer">Some Value Here</div>
</body>

然后创建另一个名为'content'或其他东西的文件并将容器标记放入其中

<c:forEach var="e" items="${testing.data}">
        <div class="component">
            <h3>
                For
                <c:out value="${e.key}" />
            </h3>
            <table id="tabDes" style=''>
                <thead>
                    <tr>
                        <th>Machine Name</th>
                        <th>Fresh 95</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="m" items="${e.value}">
                        <tr>
                            <th>${m.machines}</th>
                            <td class="color-changer">${m.Fresh 95}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </c:forEach>

然后在你的jquery中获取内容文件

<script type="text/javascript">
$(document).ready(function(){
    var auto_refresh = setInterval(
    function ()
    {
    $('.container').html('');
    $('.container').load('yourcontentfile').fadeIn("slow");
    }, 30 * 1000);

});

如何避免追加其他＆＃34; div＆＃34;当我们重新加载特定的＆＃34; div＆＃34;每隔x秒使用jquery？

1 个答案: