猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

我有一个名为“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 file

echo '

<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>

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


人到中年有点甜
浏览 138回答 2
2回答

狐的传说

dbac 我会试试你的解决方案，谢谢。与此同时，我使用一种非常简单的方法使它工作，但它帮助我遵循我自己的代码，因为我是 Javascript/AJAX 的新手。查询.phpecho "<div id='".$divID."'>".$divOutput."</div>";Scoreboard.php 后行：xmlhttp.onreadystatechange = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var check&nbsp; = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (check.indexOf('race_position_1') >= 0 ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_position_1').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_position_2') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_position_2').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_position_3') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_position_3').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_position_4') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_position_4').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_position_5') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_position_5').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_name') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_name').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; else if (check.indexOf('race_number') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_number').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_sectional_1') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_sectional_1').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; start();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_stopwatch').style.border = '1px solid green';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_stopwatch').style.color = 'green';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_sectional_2') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_sectional_2').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_sectional_3') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_sectional_3').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_stopwatch').style.border = '1px solid red';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_stopwatch').style.color = 'red';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_sectional_4') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_sectional_4').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_margins_1') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_margins_1').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_margins_2') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_margins_2').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_run_home') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_run_home').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_weather_direction') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_weather_direction').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_weather_wind') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_weather_wind').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_time_official') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_time_official').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (check.indexOf('race_time') >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('race_time').innerHTML = xmlhttp.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // last option catch all&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }那里还有一个 start() 和 stop() - 从GitHub添加一个 Javascript 计时器
0

慕工程0101907

试试这个：在 query.php 文件中：//output the div element to substituteecho '<div id="'.$divID.'">'.$divOutput.'</div>'在记分牌文件中：//suppose res is the result of your AJAX query// that is res=xmlHttp.responseXMLdocument.getElementById(res.id).innerHTML=res.innerHTML
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答