Question

有人可以指出我在使用ajax刷新特定div方面的正确方向。我知道php的基础知识，有点jquery，但是零ajax。我的记分牌是在表格中使用php构建的，如下所示 -

<div class="scoreBoard">
    <table>
        <?php
        include("lib/inc/connect.php");

        $sql="SELECT * FROM highScores ORDER BY Score DESC";
        $result=mysqli_query($con,$sql);

        $i = 1;
        while ($row = $result->fetch_assoc()) 
        {
            echo "<tr>";
            echo "<td>" . $i . "</td>";
            echo "<td>" . $row["Name"] . "</td>";
            echo "<td>" . $row["Score"] . "</td>";
            echo "</tr>";
            $i++;
        }

        mysqli_close($con);
        ?>
    </table>
</div>

目前我有一个小的刷新图像，通过JS刷新页面onClick。 ajax刷新的想法会更好。

Answer 1

不便。在某些事件触发函数中也是如此（也可以是时间间隔）：

$('.scoreBoard').load('path/to/php_fetching_data_and_building_table');

有关更多信息（如发送/获取），请点击此处：
jQuery - load

ps：你也可以使用'ajax'jquery函数

Answer 2

将您的PHP代码保存在名为somename.php的文件中，然后调用它 AJAX

somename.php

中的

<?php
  include("lib/inc/connect.php");

  $sql="SELECT * FROM highScores ORDER BY Score DESC";
  $result=mysqli_query($con,$sql);

  $i = 1;
  while ($row = $result->fetch_assoc()) {
    echo "<tr>";
    echo "<td>" . $i . "</td>";
    echo "<td>" . $row["Name"] . "</td>";
    echo "<td>" . $row["Score"] . "</td>";
    echo "</tr>";
    $i++;
  }
  mysqli_close($con);
?>

在主文件中

<div class="scoreBoard"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  setInterval( refreshScoreBoard, 5000 );
  var inRequest = false;
  function refreshScoreBoard() {
    if ( inRequest ) {
      return false;
    }
    inRequest = true;
    var load = $.get('somename.php');
    $(".scoreBoard").html('Refreshing');
    load.error(function() {
      console.log( "Error" );
      // do something here if request failed
    });
    load.success(function( res ) {
      console.log( "Success" );
      $(".scoreBoard").html('<table>'+res+'</table>');
    });
    load.done(function() {
      console.log( "Completed" );
      inRequest = false;
    });
  }
</script>

使用ajax刷新mysql div内容

2 个答案: