亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 MySQL、PHP 和 AJAX 逐步填充表數據

如何使用 MySQL、PHP 和 AJAX 逐步填充表數據

幕布斯6054654 2021-10-14 14:09:34
我有一個名為“race_data”的 MySQL 表,它不斷接收實時比賽數據。我正在嘗試使用 ajax/php/mysql 使用該表中的數據創建實時賽車記分牌。到目前為止,我已經設法組織了來自“race_data”的數據,這使我可以更輕松地將數據分類到我的實時記分牌的 Div ID 中。我一直在拼湊來自其他來源的代碼和 Stack Overflow 線程,但我現在正處于十字路口,我已經沒有想法如何解決了。下面是我用來使用標準 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>';下面是 'scoreboard.php' 文件,其中需要從 AJAX 響應更新表數據。我如何在這里使用 writeDiv 函數將 $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>任何人都可以幫我解決這個問題嗎?我所看到的只是一個空白頁,沒有任何錯誤可以幫助。非常感謝您的任何建議!
查看完整描述

2 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

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 計時器


查看完整回答
反對 回復 2021-10-14
  • 2 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號