仅刷新一个div [英] refresh only one div

问题描述

我有一个使用休眠到mysql的webapp.如果我的数据库获得了新值，则webapp可以正常工作，它们会在刷新页面后立即显示在webapp上.我想摆脱我的每五秒钟刷新整个页面"的构建，并拥有一个复选框，当激活时，tbody中的列表将单独刷新.我也在div上尝试过自动刷新，但是，是的，如果你们中有人知道这一点，请帮忙！谢谢！

I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!

代码块1(头):

<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????

;}, 2000);  } </script>

代码块2(div 1):

Code block 2 (div 1):

<input type='button' value='UPDATE' class="btn" onclick="auto()"/>

代码块3(div 2):

Code block 3 (div 2):

<tbody id="doRefresh">
        <c:forEach var="sensor" items="${listSensors}" varStatus="status">
            <tr class="listData">
                <td>${sensor.fileName}</td>
                <td>${sensor.date}</td>
                <td>${sensor.time}</td>
                <td>${sensor.channel1}</td>
                <td>${sensor.channel2}</td>
                <td>${sensor.channel3}</td>
                <td>${sensor.channel4}</td>
                <td>${sensor.channel5}</td>
                <td>${sensor.channel6}</td>
                <td>${sensor.channel7}</td>
                <td>${sensor.channel8}</td>               
            </tr>
        </c:forEach>    
    </tbody>

我去过以下页面以获取启发(以及更多):

I have been to the following pages for inspiration (and more):

1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript

谢谢

推荐答案

由于您已经具有可用于生成html的服务器代码，因此可以使用最简单的jQuery ajax方法load().

Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().

方法通过简单地传入一个url，将选择器中的所有html替换为服务器中的新html.

Method replaces all the html within the selector with new html from server by simply passing in a url.

/* within interval function */
 $('#doRefresh').load('path/to/server/script', function(){
     /* new html has been inserted, can run any html related code here*/
 });

由于<tbody>不会被替换，因此只有行，只需将行发送回去.否则，请使用$('#doRefresh').parent().load(...保留<tbody>

Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>

参考: load()文档

Reference: load() Docs

这篇关于仅刷新一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！