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

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

javascript php mysql ajax

Javascript 如何使用MySQL、PHP和AJAX逐步填充表数据,javascript,php,mysql,ajax,Javascript,Php,Mysql,Ajax,我有一个名为“race_data”的MySQL表，它不断地接收实时比赛数据。我正在尝试使用ajax/php/mysql使用此表中的数据创建一个实时赛车记分板到目前为止，我已经成功地组织了来自“race_data”的数据，这使我能够更轻松地将数据排序到用于实时记分板的Div id中我一直在拼凑来自其他源代码和堆栈溢出线程的代码，但我现在正处于十字路口，我已经没有办法解决这个问题了下面是“query.php”文件的一部分，我使用该文件使用标准ajax/php检查最后一个表项： $sql = "

我有一个名为“race_data”的MySQL表，它不断地接收实时比赛数据。我正在尝试使用ajax/php/mysql使用此表中的数据创建一个实时赛车记分板

到目前为止，我已经成功地组织了来自“race_data”的数据，这使我能够更轻松地将数据排序到用于实时记分板的Div id中

我一直在拼凑来自其他源代码和堆栈溢出线程的代码，但我现在正处于十字路口，我已经没有办法解决这个问题了

下面是“query.php”文件的一部分，我使用该文件使用标准ajax/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 file
echo '
<script type="text/javascript">function 
    writeDiv() { 
        document.getElementById("'.$divID.'").innerHTML = "'.$divOutput.'"; 
    } 
    </script>
';

$sql=“按'ID`DESC LIMIT 1'顺序从'race\u data'中选择*；
$result=mysqli\u查询（$link，$sql）；
while（$row=mysqli\u fetch\u数组（$result））{
如果（$row['ORDER']））{
//如果某些divid出现在表行中，则向其追加顺序
$divID=str_replace（“，”，$row['TYPE']。“'.$row['ORDER']）；
}否则{
$divID=str_replace（“，”，$row['TYPE']）；
}
$divOutput=$row['VALUE']；
}
//输出脚本以替换主文件中表的innerHTML
回声'
作用
writeDiv（）{
document.getElementById（“..divID.”）。innerHTML=“..divOutput.”；
} 
';

下面是“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>

  <!-- start flex box row 4 -->
  <div class="flex-container">
    <div id="race_outcome"></div>
    <div id="race_stopwatch"></div>
    <div id="race_time"></div>
    <div id="race_time_official"></div>
  </div>

</div>

</div>
</body>

谁能帮我解决这个问题？我所看到的只是一张空白页，没有错误可以帮助我。非常感谢你的建议

试试这个：
在query.php文件中：

//output the div element to substitute
echo '<div id="'.$divID.'">'.$divOutput.'</div>'

dbac我将尝试您的解决方案，谢谢。同时，我使用了一种非常直接的方法使它工作起来，但它帮助我遵循自己的代码，因为我是Javascript/AJAX新手

Query.php

echo "<div id='".$divID."'>".$divOutput."</div>";

其中还包含start（）和stop（）-从

添加Javascript计时器sql表中的条目有哪些信息？整个比赛状态，还是只有一个“较小”的分区？在第一种情况下，您可以将php

echo

作为整个div，然后在ajax请求中直接用它替换旧的div。这就是问题所在——表行不是整个表的完整更新。每次查询最多只能得到4个变量。我已经设法组织查询数据以匹配我的div id（例如race_section_3或race_position_2），并给我$divOutput以更新空的div插槽。当比赛结束时，所有div都被清除，我在下一场比赛开始时重新开始。。。谢谢你的回复！谢谢：）尝试这个解决方案，我从query.php获得了这个示例数据：

S1:2.54

scoreboard.php中的代码目前是：

xmlhttp=new-XMLHttpRequest（）；[…]document.getElementById（xmlhttp.id）.innerHTML=xmlhttp.responseText；}open（“GET”，“query.php”，true）；xmlhttp.send（）；}loadXMLDoc（）；设置间隔（loadXMLDoc，3000）错误：未捕获类型错误：无法在XMLHttpRequest.xmlhttp.onreadystatechangeusexmlhttp.responseXML.id
和xmlhttp.responseXML.innerHTML
而不是xmlhttp.id
和xmlhttp.responseText
将属性“innerHTML”设置为null，并确保在xmlhttp.onreadystatechange
函数你知道start（）和stop（）不会触发，除非在两个单独的调用中满足这些事件？在if函数中，一旦“通过测试”（即其中一个比较为真），该块将被执行，其余部分将被忽略
echo "<div id='".$divID."'>".$divOutput."</div>";

              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
                }