Question

我正在尝试开发一个使用您自己的内容自动更新的div，因为它将在画布上显示真正的ping网站。
我有以下脚本：

<script> 
var auto_refresh = setInterval(
function()
{
$('#divcanvas').fadeOut('slow').load('teste.php #divcanvas').fadeIn("slow");
}, 1000);
</script>

在我的标记中有：

<div style="width:30%">
    <div id="divcanvas">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>
</div>

在test.php中有：

<?php 
include_once "ping/pingdomain.php";
require_once "ping/config.php";
$ms = pingDomain('www.adhenrique.com.br');
$hora = date("H:i:s", time());
mysql_query("insert into ping (resposta, horario) values ('$ms', '$hora')");
$sql = mysql_query("SELECT * FROM PING order by id DESC LIMIT 0,15");
?>
<head>
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="includes/js/chart.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <canvas id="canvas" height="450" width="600"></canvas>
<?php
$pingreposta = array();
$pinghorario = array();
while($valor = mysql_fetch_assoc($sql))
{
    extract($valor);
    $pinghorario[] = $valor['horario'];
    $pingreposta[] = $valor['resposta'];
}
?>
    <script>
        var lineChartData = {
            labels :<?php echo '[' .'"'. implode('","', $pinghorario) .'"'. ']'; ?>
            ,
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : <?php echo '[' . implode(',', $pingreposta) . ']'; ?>

                }
            ]

        }

    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    }


    </script>

    </body>
</html>

但是当我打开index.php时，它没有显示画布。但是，如果我打开它显示的test.php数据。也就是说，画布的代码是正确的我的错误在哪里？

Answer 1

在这一行，你做了一个拼写错误：

$('#divcanvas').fadeOut('slow').load('teste.php #divcanvas').fadeIn("slow");

teste.php 应该 test.php 我猜。

Answer 2

当您以这种方式致电load('teste.php #divcanvas')时，您只根据jQuery.load()

从teste.php（不存在）请求#divcanvas

$（“＃result”）。load（“ajax / test.html #container”）;

执行此方法时，它会检索ajax / test.html的内容，   但随后jQuery解析返回的文档以查找元素   容器的ID。插入此元素及其内容   到具有结果ID的元素，以及检索到的其余部分   文件被丢弃。

我更喜欢使用ajax的这种方法

main.html中

<!doctype html>
<body>
<head>
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js"></script>
<script src="chart.js"></script>
</head>
<script>
$(document).ready(function(){
    $('#divcanvas').fadeOut('slow');

    // Set "active" to true to animate addData()
    var chartAnimation = {"active":false,"time":250,"currentTime":0,"currentIndex":0};
    var data = new Array();
    var label = new Array();

    var lineChartData = {
        labels: [],
        datasets : [{
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data: []
        }]
    };

    var canvas = document.getElementById("canvas");
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });

    $.get("test.php", function(res) {
        res = jQuery.parseJSON(res);
        $('#divcanvas').fadeIn("slow")
        for (var key in res) {
            var arr = new Array(res[key])
            data.push(arr);
            label.push(key);
            if (chartAnimation.active) {
                chartAnimation.currentTime += chartAnimation.time;
                setTimeout(function(){myLine.addData(data[chartAnimation.currentIndex],label[chartAnimation.currentIndex]); chartAnimation.currentIndex++;},chartAnimation.currentTime);
            } else {
                myLine.addData(arr,key);
            }
        }
    });

});
</script>
<div style="width:30%">
    <div id="divcanvas">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>
</div>
</body>

test.php的

<?php 
include_once "ping/pingdomain.php";
require_once "ping/config.php";
$ms = pingDomain('www.adhenrique.com.br');
$hora = date("H:i:s", time());
mysql_query("INSERT INTO ping (resposta, horario) VALUES (".$ms.", ".$hora.")");
$sql = mysql_query("SELECT * FROM PING order by id DESC LIMIT 0,15");
$resp = array();
while ($valor = mysql_fetch_assoc($sql)) {
    $resp[$valor['horario']] = $valor['resposta'];
}
echo json_encode($resp);
?>

为了好玩而添加的图表动画：）

自动刷新div不工作

2 个答案:

main.html中

test.php的