Javascript 如何避免附加“其他”；分区'；s"；当我们重新加载一个特定的；分区；每x秒使用jquery？_Javascript_Jquery_Html_Css_Jsp

Javascript 如何避免附加“其他”；分区'；s"；当我们重新加载一个特定的；分区；每x秒使用jquery？

javascript jquery html css jsp

Javascript 如何避免附加“其他”；分区'；s"；当我们重新加载一个特定的；分区；每x秒使用jquery？,javascript,jquery,html,css,jsp,Javascript,Jquery,Html,Css,Jsp,我正在做一个项目，在这个项目中，我试图每30秒重新加载一次div，而不重新加载整个页面- 下面是我的JSP文件（dataInfo.JSP）中的div，我希望每隔30秒重新加载div容器，而不重新加载整个页面 <body> <div id='headerDivDash'> <h1 id='topHeaderDash'>  </h1>

我正在做一个项目，在这个项目中，我试图每30秒重新加载一次div，而不重新加载整个页面-

下面是我的JSP文件

（dataInfo.JSP）

中的div，我希望每隔30秒重新加载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>

    <!-- 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>

现在我面临的问题是，如果我每30秒重新加载

容器

div，然后我的页眉div和页脚div，它们每次都会被追加，我不确定该如何解决这个问题？有什么想法吗

我的最终目标是每30秒加载

容器

div，而不重新加载页面，也不附加任何其他div。这就是全部

是的，因为您每次都会得到整个数据信息文件（页眉、页脚和全部）

按如下方式分隔文件：

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>


对于
机器名
新鲜95
${m.machines}
${m.Fresh 95}

然后在jquery中获取内容文件

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

});


$（文档）.ready（函数（）{
var auto_refresh=setInterval(
函数（）
{
$（'.container'）.html（''）；
$（'.container'）.load（'yourcontentfile'）.fadeIn（“慢”）；
}, 30 * 1000);
});

--请参阅“加载页面片段”Aahh。。有道理。。我不是一个喜欢UI/jquery的人。。所以在我的例子中，它将是这样的

$（'.container'）.load（'dataInfo.jsp#container'）.fadeIn（“slow”）？正确吗？.container
，而不是#container
（除非您的div也有id=“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>

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

});