链接来自通过Ajax引入的2个不同php文件的结果

Question

我有2个php文件，它们提取不同的查询结果（在下面添加）

有没有办法可以链接这些结果，例如 我在底部添加了2张图片，右边的表格是在第一个查询（beacon.php）之后，左边的表格是在Del.php调用之后

我还附加了示例数据图像我已经在数据周围添加了一个蓝色框，如果可能的话我想链接，因为信标24,89,95存在于Q1（beacon.php）和Q2（Del.php）中更改这些单元格的边界并将单元格边框的其余部分保留为黑色是否有办法执行此操作？

Q1 = Beacon.php

$sql = '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($sql);

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

echo json_encode($rows);

Q2 = Del.php

$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);


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

echo json_encode($rows);

html / javascript side

<style>
table {
padding: 10px 10px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}

table, td, th {
  border: 1px solid black;    
 text-align: center; 
 vertical-align: middle;
 font-size: 40px;
 background-color: #8F8F8F;
}
</style>

<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/beacon.php', function(response) {
console.log(response);
var row;
$.each(response, function(index, item) {
    console.log(item);
    $(`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) {
    $.each(response.query1, function(index, item) {
        console.log(item.beacon,item.location);
        //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
$(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
    });
});
}
var updateTableInterval = setInterval(updateTable, 5000);
});

$.get('php/del.php', function(response) {
console.log(response);
var row;
$.each(response, function(index, item) {
    console.log(item);
if (item.delivery_avg <= 7.00) {
return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 14.00) {
 return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick'}).toggleClass('coloured');
} else if (item.delivery_avg >= 14.01 && item.delivery_avg <= 20.00) {
return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 20.01) {
return $(`td.${item.beacon}`).css({'border-color': 'red', 'border-width':'thick' }).toggleClass('coloured');
}
});
});
</script>

Answer 1

我认为MySQL最好将数据链接起来。

SELECT
    beacon.beacon,
    beacon.location,
    beacon.date,
    beacon.counter,
    del.delivery_avg
FROM
(
    SELECT
        beacon,
        location,
        date,
        COUNT(location) AS counter
    FROM `test`.`test`
    WHERE `date = CURDATE()
    AND `time` > ( NOW() - INTERVAL 40 SECOND )
    GROUP BY beacon
) beacon
JOIN
(
    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
) del ON beacon.beacon = del.beacon
ORDER BY beacon.counter DESC