【发布时间】：2021-05-19 05:33:52
【问题描述】：
当 AJAX 响应具有某种类型的值（特别是 =“BusyChair”）时，我想更改 div 的背景颜色。
我在绘制 div 的背景中有一张图片。我知道应该有更好的方法，但这就是我想出的。所以我们有更多的椅子，我只是想指出它是如何工作的。
HTML + JS 部分 + CSS：
<!DOCTYPE html>
<html>
<head>
<style>
#roomName{
width:8%;
height:5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
article {
position: relative;
float: right;
width: 100%;
background-color: white;
}
#chair01 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
#chair02 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
#chair03 {
width:0.5%;
height:0.5%;
background-color: #ddd;
position:fixed;
border: solid;
left : /*position*/;
top : /*position*/;
}
</style>
</head>
<body>
<nav><!-- basic navbar --></nav>
<article>
<div>
<div id="roomName">ROOM NAME</div>
<div id="chair01"></div>
<div id="chair02"></div>
<div id="chair03"></div>
<img id='background'>
</div>
</article>
<script src="useful/jquery.min.js"></script>
<script>
var locations;
var date_times;
var i;
var text ='';
setInterval(() => {
$.ajax({
type: "POST",
url: 'PHP/chair_stat.php',
success: function(data,result) {
$.each(data,function(key,item){
locations = item.Location;
date_times = item.Date_Time;
if(locations.includes('chair01')){
document.getElementById('chair01').style.backgroundColor="#00d61d";
}
});
}
});
}, 1000);
</script>
<script>
document.getElementById('background').src='Resources/Pictures/MainBuilding/AllRooms.PNG';
document.getElementById('background').style.width ='98%'
document.getElementById('background').style.border ='solid';
</script>
</body>
</html>
PHP：
<?php
require ('connect_to_db.php');
$sql = "SELECT * FROM actual_location_status WHERE Status='BusyChair' ORDER BY Date_Time";
$sql_param = mysqli_query($conn,"SELECT parameter_data FROM all_parameters WHERE name_of_parameter = 'Normal_Busy_Time'");
$row_param = mysqli_fetch_row($sql_param);
$time_left;
$time_left = $row_param[0];
$result = $conn->query($sql);
$gathered = [];
while ($row = $result->fetch_assoc()) {
$gathered[] =$row;
}
header('Content-Type: application/json');
echo json_encode($gathered);
?>
应该发生什么。
- 查看包含所有椅子的页面。 （背景为灰色）。
- 每秒询问一次数据，如果椅子忙，必须将背景颜色重新着色为绿色。
- 有一个“Normal_Busy_Time”，即 01:30:00 (H-m-s) 和一个“Time_When_Gets_Busy”，例如：2021-02-16 11:45:30。当 Time_When_Gets_Busy + Normal_Busy_Time 过去时，我需要将 div 的背景重新着色为红色。我什至没有走到这一步，因为前两部分让我卡住了。
我不需要一个完整的解决方案，我只需要一条路。
问题：
- 我是否正确使用了 AJAX 响应？ （我的意思是我得到了一个 JSON obj，我将它解析为一个字符串）。
- 这种方法有用吗？ （我的意思是我的想法已经让我烦恼这个解决方案是垃圾）
- 欢迎提出想法，我可以从头开始重新启动。 （特别是如果有一种方法可以让我的代码看起来至少更干净一点）。请记住，一个房间里有 80 把椅子，我必须照顾 4 个房间。
【问题讨论】：
-
嗨，这里有什么不工作的？
-
代码部分正常工作，只是感觉很奇怪。就像我不知道如何进行其他 div 的着色一样。假设响应将为我提供 78 把独特的椅子。如何在不到处写 if_else-if_else 的情况下为铰孔 77 着色？
-
你能显示 json 的输出吗？
-
0: Object { Loc: "CH01", Stat: "BusyChair", Date_Time: "2021-02-16 10:45:30", ... } 1: Object { Loc: "CH02 ", Stat: "BusyChair", Date_Time: "2021-02-16 10:45:30", ... }
-
所以这里
Loc用于识别要着色的元素以及该值与元素的 id 匹配？
标签： javascript php html css ajax