Question

我有一个php页面，显示Web界面中的服务器日志。这很简单。基本上ajax call内有一个setinterval()，它会命中后端的php文件，它会读取日志并回显它。相关代码是：

setInterval(function()
{
    $.get("log.php",{logId: $('#logId').val()}, function(data)
    {
        $("#logDetails").html(data);

        //scroll to the bottom when updated...
        $("#logDetails").stop().animate({scrollTop: $("#logDetails")[0].scrollHeight}, 800);
    });
}, 2000);

正如您所看到的，这只是更新一个名为logDetails的id的div，其中包含服务器中日志文件的内容。

div有style="overflow:scroll"，而$("#logDetails").stop().animate..行是在添加新内容时滚动到div的底部。这一切都很有效。

如果用户向上滚动div并正在检查日志，并且新内容进入，则div向下滚动。那也没关系。问题是服务器日志可能有几个小时不活动。在此期间，当用户向上滚动时，由于setinterval仍在工作，即使新内容不可用，他也会向下滚动。这可能会成为一个真正的麻烦。

我想尽可能以最小的方式处理这个问题，我认为这样做可能就足够了：

$.get("log.php",{logId: $('#logId').val()}, function(data)
{
    //new condition to check id new content has come
    if($('#logDetails').val() != data)
    {
        //update div and scroll to the bottom..
    }
    ...

然而这不起作用。我知道其他方法，如检查服务器端的日志修改时间等，但由于其他原因我无法修改任何这些文件。

所以我的问题是 - 为什么这不起作用？我怎么能在接口文件本身内执行此操作而不是采用其他方法？

推出日志的PHP代码是：

$contents = "";
$handle   = @fopen($logFile, 'r');
if($handle) 
{
    while(($line = fgets($handle)) !== false) 
    {
        //highlight errors
        $txt = "Execution stopped because of error";
        if(strstr($line,$txt))
        {
            $line = "<span style='color:red'>".$line."</span>";
        }

        $contents .= $line;
    }
}
@fclose($handle);
echo nl2br($contents);

Answer 1

由于您提到来自日志的数据将是动态的，因此很难准确找出问题所在。但是你可以通过以下方式弄明白：

执行console.log $('#logDetails').val()和data
然后使用像kDiff这样的差异软件来找出它们之间的差异。

一旦找到差异，就可以考虑解决方法。

希望有所帮助！

Answer 2

.val()不太可行，但由于您还没有提供您尝试使用的HTML内容，我们只能提供建议。尝试使用djidi评论中提到的$('#logDetails').text()或$('#logDetails').html()。

Answer 3

您可以尝试这样做以确保您只获得新数据。显然，我对您的系统一无所知，因此必须对其进行修改以使用您拥有的数据：

$contents = "";
$handle   = @fopen($logFile, 'r');
$lastHash = !empty($_GET['last_hash']) ? $_GET['last_hash'] : nulll
if($handle) 
{
    $stale = true;
    while(($line = fgets($handle)) !== false) 
    {
        //highlight errors
        $txt = "Execution stopped because of error";
        if(strstr($line,$txt))
        {
            $line = "<span style='color:red'>".$line."</span>";
        }
        if (empty($lastHash) || md5($line) == $lastHash) {
           // this is the last stale line
          $stale = false;
        }

        if (!$stale) {

            $contents .= $line;
            $lastHash = md5($line);
        }
    }
}
@fclose($handle);
echo json_encode(array('log_data' => nl2br($contents), 'last_hash'=> $lastHash));

并在javascript中：

var lastHash  = null;
setInterval(function()
{
    $.getJSON("log.php",{logId: $('#logId').val(), last_hash : lastHash}, function(data)
    {
        lastHash = data.last_hash
        if (data.log_data && data.log_data.length) {
            $("#logDetails").html(data.log_data);


            //scroll to the bottom when updated...
            $("#logDetails").stop().animate({scrollTop: $("#logDetails")[0].scrollHeight}, 800);});
         }
}, 2000);

无法根据其中的当前值更新div

3 个答案: