Javascript 如何自动刷新div类内容？_Javascript_Php_Html_Ajax

Javascript 如何自动刷新div类内容？

javascript php html ajax

Javascript 如何自动刷新div类内容？,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我的代码如下： <div class="huge"> <?php echo date ("g:i:s A"); ?> </div> 如何将设置为每秒刷新您可以使用Ajax，比如：如果只是简单的文本，或者加载了简单的HTML，那么您可以使用 setInterval(function(){ $("#huge").load("now_playing.php"); ... }, 5000); 您还可以使用以下内容： function rel

我的代码如下：

<div class="huge">
<?php echo date ("g:i:s A"); ?>
</div>

如何将

设置为每秒刷新

您可以使用Ajax，比如：

如果只是简单的文本，或者加载了简单的HTML，那么您可以使用

setInterval(function(){
    $("#huge").load("now_playing.php");
    ...
}, 5000);

您还可以使用以下内容：

function reload() { 

jQuery.ajax({
    url: "fetch_message.php",
    type: "POST",
    success:function(data){
        $('#huge').innerHTML(data);
        setTimeout(function(){
            reload()
        }, 1000);
    }
});

假设您需要从服务器获取更新（注意您原始帖子中的PHP代码），则需要实现两件事：

客户端为获取新数据而请求的服务器端脚本（在本例中是用PHP编写的）

客户端javascript从服务器获取新数据并更新div

让我们举个例子

index.php

 <html>
    <head>
        <title>My date updater</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <div class="huge"><?php echo date ("g:i:s A"); ?></div>
    </body>
 </html>

<?php echo date ("g:i:s A"); ?>

loadData.php

 <html>
    <head>
        <title>My date updater</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <div class="huge"><?php echo date ("g:i:s A"); ?></div>
    </body>
 </html>

<?php echo date ("g:i:s A"); ?>

最初，在这个示例index.php中命名的页面将加载并显示初始日期（使用一些php内联代码）

然后javascript将开始每秒从服务器获取数据（使用对loadData.php的ajax请求），并使用新数据更新div

希望对你有所帮助

注意：日期和时间信息也可以在客户端使用纯javascript代码获取，但对于某些应用程序，客户端的日期和时间信息不够可靠，因为它依赖于客户端浏览器设置的日期和时间设置。

这将用id=“巨大”更新元素的内容每一秒。您不需要任何初始php值。如果需要其他元素，如分钟和秒，当然可以将dt.getMinutes（）和dt.getHours（）添加到字符串中

<div id="huge"></div>

<script language="javascript">
function refreshSomething(){
var dt = new Date();
document.getElementById('huge').innerHTML = dt.getSeconds();
}


setInterval(function(){
    refreshSomething() // this will run after every second
}, 1000);
</script>


函数刷新某物（）{
var dt=新日期（）；
document.getElementById（'maging'）.innerHTML=dt.getSeconds（）；
}
setInterval（函数（）{
refreshSomething（）//这将在每秒钟之后运行
}, 1000);

这也有效-

<script>function getTime(){
  var date = new Date();
  date.setTime(Date.now());

  return (date.getHours() % 12) + ':' + leadingzero(date.getMinutes()) + ':' + leadingzero(date.getSeconds()) + (date.getHours() < 12 ? ' AM' : ' PM'); ; 
}

function leadingzero(n) {
  return (n < 10) ? ("0" + n) : n;
}

function updateDiv(){
  var d = document.document.getElementsByClassName('yourDivClassname')[0];
  d.innerHTML = getTime();
}

setInterval(updateDiv, 1000);</script>

函数getTime（）{ 变量日期=新日期（）； date.setTime（date.now（））； return（date.getHours（）%12）+'：'+leadingzero（date.getMinutes（））+'：'+leadingzero（date.getSeconds（））+（date.getHours（）<12？'AM'：'PM'）； } 函数引线零（n）{ 返回值（n<10）（“0”+n）：n； } 函数updateDiv（）{ var d=document.document.GetElementsByCassName（'yourDivClassname'）[0]； d、 innerHTML=getTime（）； } setInterval（updateDiv，1000）；

你能说得更具体一点吗，@WebDev。每秒更新一次的必要性是什么？您需要了解。Ajax实际上没有什么用处，除非有理由使用它，否则我强烈建议使用JavaScript之类的东西来完成此操作。@FluxCoder嗯，否则您将如何使用服务器的数据更新页面的某个部分？如果OP只是更新时间，那么是的，不需要Ajax调用。对不起，我以为你只是在显示日期。