javascript - 链接通过 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 端

<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