我有一個名為“race_data”的 MySQL 表，它不斷接收實時比賽數(shù)據(jù)。我正在嘗試使用 ajax/php/mysql 使用該表中的數(shù)據(jù)創(chuàng)建一個實時賽車記分牌。到目前為止，我已經(jīng)設法組織了來自“race_data”的數(shù)據(jù)，這使我可以更輕松地將數(shù)據(jù)分類為我的實時記分牌的 Div ID。我一直在拼湊來自其他來源和 Stack Overflow 線程的代碼，但我現(xiàn)在正處于十字路口，我已經(jīng)沒有解決方法的想法了。下面是我使用標準 ajax/php 檢查最后一個表條目的“query.php”文件的一部分：$sql = "SELECT * FROM `race_data` ORDER BY `ID` DESC LIMIT 1";$result = mysqli_query($link,$sql);while ($row = mysqli_fetch_array($result)) { if ($row['ORDER']) { // append order to some divIDs if appears in table row $divID = str_replace(" ","_",$row['TYPE']."_".$row['ORDER']); } else { $divID = str_replace(" ","_",$row['TYPE']); } $divOutput = $row['VALUE']; }// output the script to replace the innerHTML of the table in the main fileecho '<script type="text/javascript">function writeDiv() { document.getElementById("'.$divID.'").innerHTML = "'.$divOutput.'"; } </script>';下面是需要從 AJAX 響應更新表數(shù)據(jù)的“scoreboard.php”文件。如何在這里使用 writeDiv 函數(shù)將 $divOutput 寫入下面正確的 $divID 表格單元格？<body><div class="container"><!-- force content to bottom (using Bootstrap) --><div class="fixed-bottom"> <!-- start flex box row 1 --> <div class="flex-container"> <div id="race_position_1"></div> <div id="race_position_2"></div> <div id="race_position_3"></div> <div id="race_position_4"></div> <div id="race_position_5"></div> <div id="race_margins_1"></div> <div id="race_margins_2"></div> </div> <!-- start flex box row 2 --> <div class="flex-container"> <div id="race_number"></div> <div id="race_name"></div> </div> <!-- start flex box row 3 --> <div class="flex-container"> <div id="race_sectional_1"></div> <div id="race_sectional_2"></div> <div id="race_sectional_3"></div> <div id="race_sectional_4"></div> <div id="race_run_home"></div> <div id="race_wind_speed"></div> <div id="race_weather_direction"></div> </div> </div></div></div></body>誰能幫我解決這個問題？我所看到的只是一個空白頁，沒有任何錯誤可以提供幫助。非常感謝您的任何建議！
2 回答
狐的傳說
TA貢獻1804條經(jīng)驗 獲得超3個贊
dbac 我會試試你的解決方案，謝謝。與此同時，我使用一種非常簡單的方法使它工作，但它幫助我遵循我自己的代碼，因為我是 Javascript/AJAX 的新手。
查詢.php
echo "<div id='".$divID."'>".$divOutput."</div>";
Scoreboard.php 后行：
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var check = xmlhttp.responseText;
if (check.indexOf('race_position_1') >= 0 ) {
document.getElementById('race_position_1').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_position_2') >= 0) {
document.getElementById('race_position_2').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_position_3') >= 0) {
document.getElementById('race_position_3').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_position_4') >= 0) {
document.getElementById('race_position_4').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_position_5') >= 0) {
document.getElementById('race_position_5').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_name') >= 0) {
document.getElementById('race_name').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_number') >= 0) {
document.getElementById('race_number').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_sectional_1') >= 0) {
document.getElementById('race_sectional_1').innerHTML = xmlhttp.responseText;
start();
document.getElementById('race_stopwatch').style.border = '1px solid green';
document.getElementById('race_stopwatch').style.color = 'green';
} else if (check.indexOf('race_sectional_2') >= 0) {
document.getElementById('race_sectional_2').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_sectional_3') >= 0) {
document.getElementById('race_sectional_3').innerHTML = xmlhttp.responseText;
stop();
document.getElementById('race_stopwatch').style.border = '1px solid red';
document.getElementById('race_stopwatch').style.color = 'red';
} else if (check.indexOf('race_sectional_4') >= 0) {
document.getElementById('race_sectional_4').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_margins_1') >= 0) {
document.getElementById('race_margins_1').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_margins_2') >= 0) {
document.getElementById('race_margins_2').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_run_home') >= 0) {
document.getElementById('race_run_home').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_weather_direction') >= 0) {
document.getElementById('race_weather_direction').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_weather_wind') >= 0) {
document.getElementById('race_weather_wind').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_time_official') >= 0) {
document.getElementById('race_time_official').innerHTML = xmlhttp.responseText;
} else if (check.indexOf('race_time') >= 0) {
document.getElementById('race_time').innerHTML = xmlhttp.responseText;
} else {
// last option catch all
}
那里還有一個 start() 和 stop() - 從GitHub添加一個 Javascript 計時器
慕工程0101907
TA貢獻1887條經(jīng)驗 獲得超5個贊
試試這個：
在 query.php 文件中：
//output the div element to substitute
echo '<div id="'.$divID.'">'.$divOutput.'</div>'
在記分牌文件中：
//suppose res is the result of your AJAX query
// that is res=xmlHttp.responseXML
document.getElementById(res.id).innerHTML=res.innerHTML
- 2 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消