为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 MySQL、PHP 和 AJAX 逐步填充表格数据

如何使用 MySQL、PHP 和 AJAX 逐步填充表格数据

PHP
人到中年有点甜 2022-01-08 17:15:49
我有一个名为“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>';下面是需要从 AJAX 响应更新表数据的“scoreboard.php”文件。如何在这里使用 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>  </div></div></div></body>谁能帮我解决这个问题?我所看到的只是一个空白页,没有任何错误可以提供帮助。非常感谢您的任何建议!
查看完整描述

2 回答

?
狐的传说

TA贡献1804条经验 获得超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 计时器


查看完整回答
反对 回复 2022-01-08
?
慕工程0101907

TA贡献1887条经验 获得超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


查看完整回答
反对 回复 2022-01-08
  • 2 回答
  • 0 关注
  • 137 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号