Question

我使用php文件从mysql数据库中提取数据，然后使用Ajax将其推送到html页面：

数据正在被正确拉入，它看起来像是在网络选项卡（响应）中显示，但是当我查看控制台日志时，没有任何显示任何想法的原因

PHP

<?php
header('Content-type: application/json');
$servername = "test:3306";
$username = "test";
$password = "test!";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
#   header('Content-Type: applicaton/json');


$sql = "SELECT beacon,TIME_FORMAT(TIMEDIFF(max(`time`),min(`time`)), '%i.%s') 
AS `delivery_avg` 
FROM `test`.`test` 
where date = CURDATE()
and time > now() - INTERVAL 30 MINUTE
group by beacon ";
$result = $conn->query($sql);

$sql2 = 'SELECT 
* 
FROM
(SELECT
 beacon,location,date,
COUNT(location) AS counter 
FROM `test`.`test`
WHERE `date` = CURDATE() and `time` > NOW() - interval 40 second
GROUP BY beacon) AS SubQueryTable
ORDER BY SubQueryTable.counter DESC;';
$result = $conn->query($sql2);


$result = mysqli_query($conn ,  $sql);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
  $rows[] = $r;
}

echo json_encode($rows);

$result2 = mysqli_query($conn ,  $sql2);
$rows2 = array();
while($r = mysqli_fetch_assoc($result2)) {
  $rows2[] = $r;
}

echo json_encode($rows2);

$conn->close();
?>

HTML

 <script>    
 $(document).ready(function() {
    for (var i = 0; i < 12; i++) {
        var row = $('<tr>').appendTo("#zoning tbody");
        for (var j = 1; j < 11; j++) {
            $(`<td class='${i * 10 + j}'>${i * 10 + j}</td>`).appendTo(row);
        }
    }

    $.get('php/test.php', function(response) {
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item.delivery_avg,item.beacon,item.location);
            $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
        });
    });


        function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $.get('php/test.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.delivery_avg,item.beacon,item.location);
                //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
        if (item.delivery_avg <= 10.00) {
             return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick'}).toggleClass('coloured');
        } else if (item.delivery_avg>= 10.01 && item.delivery_avg <= 20.00) {
             return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick','background-color':item.location}).toggleClass('coloured');
        } else if (item.delivery_avg>= 20.01 && item.delivery_avg <= 30.00) {
             return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick','background-color':item.location}).toggleClass('coloured');

        }
            });
        });
}
    var updateTableInterval = setInterval(updateTable, 2000);
});

</script>

数据从mysql中提取但不能通过ajax传递给html

0 个答案: