如何在不加载文件的情况下刷新div内容?

时间:2018-01-13 08:38:31

标签: javascript php

我有简单的PHP文件:

Javascript代码:

<script src="jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

var refreshId = setInterval(function()
{
     $('#links').fadeOut("slow").load("test.php").fadeIn("slow");
}, 5000);

$.ajaxSetup({ cache: false });

</script>

需要的元素:

<p>Date sended: <span id="links"><?=dateDiff("2018-01-13 13:26")?></span></p>

PHP代码:

<?php
    function dateDiff($date1, $date2 = false)
    {   
        date_default_timezone_set("Asia/Dushanbe");
        if($date2 == false) $date2 = date("Y-m-d H:i:s");

        $date_1 = new DateTime($date1);
        $date_2 = new DateTime($date2);

        $diff = $date_1->diff($date_2);

        if ($diff->days > 365) {
            return $date_1->format('Y-m-d');
        } elseif ($diff->days > 7) {
            return $date_1->format('M d');
        } elseif ($diff->days > 1) {
            return $date_1->format('l - H:i');
        } elseif ($diff->days == 1) {
            return "Yesterday ".$date_1->format('H:i');
        } elseif ($diff->days > 0 OR $diff->h > 1) {
            return $date_1->format('H:i');
        } elseif ($diff->i >= 1) {
            return $diff->i." min ago";
        } elseif ($diff->d == 0 AND $diff->s < 60) {
            return $diff->s." sec ago";
        } else {
            return "Just now";
        }
    }
?>

这里我使用load()方法中的路径文件。我现在将我的php函数复制到当前文档。我可以使用emty load()方法并每隔5秒刷新一次所需的div内容而不需要另外的文件吗?

2 个答案:

答案 0 :(得分:0)

您可以将所有html和jquery和php代码放在同一个文件中。但是,如果您要查找更新或主要内容,请在URL中添加查询字符串。如果该行为是更新,则使用ob_end_clean();清除页面以仅接收请求的更新。在此之后立即使用exit()来停止其他处理。

行。首先将查询字符串act=update添加到加载网址:

 $('#links').fadeOut("slow").load("test.php?act=update").fadeIn("slow");
}, 5000);

第二:更新了php代码以消除其他html和jquery代码,只需运行页面的php部分:

<?php
ob_start();
if (isset($_GET["act"])){

if ($_GET["act"]=='update'){
ob_end_clean();

    function dateDiff($date1, $date2 = false)
    {   
        date_default_timezone_set("Asia/Dushanbe");
        if($date2 == false) $date2 = date("Y-m-d H:i:s");

        $date_1 = new DateTime($date1);
        $date_2 = new DateTime($date2);

        $diff = $date_1->diff($date_2);

        if ($diff->days > 365) {
            return $date_1->format('Y-m-d');
        } elseif ($diff->days > 7) {
            return $date_1->format('M d');
        } elseif ($diff->days > 1) {
            return $date_1->format('l - H:i');
        } elseif ($diff->days == 1) {
            return "Yesterday ".$date_1->format('H:i');
        } elseif ($diff->days > 0 OR $diff->h > 1) {
            return $date_1->format('H:i');
        } elseif ($diff->i >= 1) {
            return $diff->i." min ago";
        } elseif ($diff->d == 0 AND $diff->s < 60) {
            return $diff->s." sec ago";
        } else {
            return "Just now";
        }

exit();
}
}

?>

您无需初始化范围内的内容。相反,您必须知道应该传递给更新函数的初始值。我建议使用这样的数据标签:

<p>Date sended: <span id="links" data-initialdate="2018-01-13 13:26"></span></p>

并在每次通话中,将其发送给比较:

var baseTime=$('#links').data("initialdate");
  $('#links').fadeOut("slow").load("test.php?act=update&date1="+baseTime).fadeIn("slow");
}, 5000);

在这种情况下,您必须更改您的函数以从php中读取date1而不是函数的输入。

答案 1 :(得分:-1)

function refreshId() {
    $('#links').fadeOut("slow").load("test.php").fadeIn("slow");
}

var run = setInterval(refreshId, 5000);