使用 javascript.jquery 仅自动刷新特定的 div

Question

我有一个 html 页面

<div id="mainframe">

            <div id="div2"></div>


        <div id="div3"></div>

        <div id="div4">

            <table class="table3">
                <tbody>
                    <tr>
                    <td width=3%></td>
                        <td class="listtitle">1</td>
                        <td width=5%></td>
                        <td class="listtitle">2</td>
                    </tr>
                    <tr>
                    <td width=3%></td>
                        <td class="dashboardchart" ><div  style="width:550px ; height:400px"><canvas id="chart_scanner" width="500" height="400">
                        </canvas></div></td>

                        <td class="dashboardchart"><div id="div_chartActivity" style="width:550px ; height:400px"><canvas id="chart_activity" width="500" height="400">
                        </canvas></div></td>
                        <td width=3%></td>
                    </tr>
                </tbody>
            </table>

        </div>  
    </div>

我想在 15 秒后实现自动刷新，但应该只重新加载 #div3 和 #div4 而不是整个页面。

谁能建议我应该在我的页面中添加什么脚本

Answer 1

您可以使用 setInterval 或 setTimeout 每隔 X 秒调用一次函数

var count = 0;

function refresh() {

//your stuff to refresh your divs here (ajax requests...)

  $("#div3").html(count);
  $("#div4").html(count);
  count++;
  setTimeout(refresh, 1000);
}

refresh();

https://jsfiddle.net/qbknsu0m/

Answer 2

您可以使用此代码：

var myVar = setInterval(myTimer, 15000);

function myTimer() {
    //Here you can update specific part of your page
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

我们正在启动一个 15 秒的 JavaScript 计时器。然后当 15 秒过去时，myTimer 函数执行。在此函数中，您可以选择要更新的 dom 元素，并将其 innerHTML 属性设置为要显示的内容。

Answer 3

类似这样的：

 $(document).ready(
            function() {
                setInterval(function() {
                    var randomnumber = Math.floor(Math.random() * 100);
                    $('#div3').text(
                            'I am getting refreshed every 3 seconds..! Random Number ==> '
                                    + randomnumber);
                    $('#div4').text(
                            'I am getting refreshed every 3 seconds..! Random Number ==> '
                                    + randomnumber);
                }, 3000);
            });