使用JavaScript每30秒刷新一次div

我正在尝试每30秒自动更新一次div

<script type="text/javascript">

    function refresh_handler() {
        function refresh() {
           $.get('/refresh/3', function(result) {
               $(".roek").innerHtml = result;
               console.log(result);
           });
        }
        setInterval(refresh, 3000); //every 5 minutes
    }

    $(document).ready(refresh_handler);

</script>

<div class="col-md-12">
    <div class="roek">
        @foreach ($hours as $hour)
            @if ($hour->repeat_day === "Monday")
                <p>
                    <div class="col-md-3">
                        <b> Day: </b> {{ $hour->repeat_day }} <a href="/deletehour/{{ $hour->id }}"> <span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color: cyan"></span></a> <br>

                        <b> Start: </b> {{ strftime("%H:%M", strtotime($hour->starttime))}} <br>
                        <b> End: </b> {{ strftime("%H:%M", strtotime($hour->endtime))}} <br>
                    </div>
                </p>
            @endif
        @endforeach
    </div>
</div>

这是我在刷新后使用的查询：

//show all standard workhours per specific user
public function workhoursrefresh()
{
    $hours = Availability::FindAvailabilitys()->where([['user_id', '=', Auth::id()],
                                                       ['type', '=', 'standard']])
                                              ->orderBy('starttime', 'asc')
                                              ->get();
}

函数刷新\u处理程序（）{
函数刷新（）{
$.get（'/refresh/3'，函数（结果）{
$（“.roek”）.innerHtml=结果；
控制台日志（结果）；
});
}
setInterval（刷新，3000）；//每3秒30秒将其替换为30000
}
$（文档）.ready（刷新处理程序）；

函数刷新\u处理程序（）{
函数刷新（）{
$.get（'/refresh/3'，函数（结果）{
$（“.roek”）.innerHtml=结果；
控制台日志（结果）；
});
}
setInterval（刷新，3000）；//每3秒30秒将其替换为30000
}
$（文档）.ready（刷新处理程序）；

调试步骤

检查浏览器开发工具的console选项卡是否存在错误

确保使用浏览器开发工具的“网络”选项卡调用url

/refresh/3

确保url

/refresh/3

返回您期望的数据

确保页面上至少有一个带有

class=“roek”

的元素

在您的例子中，您使用的是jQuery—因此在jQuery对象上使用

html（）

方法，因为jQuery上没有innerHTML

代码：

调试步骤

检查浏览器开发工具的console选项卡是否存在错误

确保使用浏览器开发工具的“网络”选项卡调用url

/refresh/3

确保url

/refresh/3

返回您期望的数据

确保页面上至少有一个带有

class=“roek”

的元素

在您的例子中，您使用的是jQuery—因此在jQuery对象上使用

html（）

方法，因为jQuery上没有innerHTML

代码：

---

谢谢我修正了它。谢谢我修正了它。虽然这段代码可以回答这个问题，但提供关于它如何和/或为什么解决这个问题的附加上下文将提高答案的长期价值。虽然这段代码可以回答这个问题，提供关于如何和/或为什么解决问题的附加上下文将提高答案的长期价值。

//show all standard workhours per specific user
public function workhoursrefresh()
{
    $hours = Availability::FindAvailabilitys()->where([['user_id', '=', Auth::id()],
                                                       ['type', '=', 'standard']])
                                              ->orderBy('starttime', 'asc')
                                              ->get();
}

<script type="text/javascript">

    function refresh_handler() {
        function refresh() {
            $.get('/refresh/3', function(result) {
                $(".roek").innerHtml = result;
                console.log(result);
            });
        }
        setInterval(refresh, 3000); //every 3 second for 30 second replace it with 30000
    }

    $(document).ready(refresh_handler);

</script>

function refresh_handler() {
    function refresh() {
         $.get('/refresh/3', function(result) {
             $(".roek").html(result);
             console.log(result);
         });
    }

    setInterval(refresh, 30000);
}

$(document).ready(refresh_handler);