0

关于使用 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 刷新的想法会更好。

4

2 回答 2

0

将您的 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>
于 2013-06-23T13:26:04.160 回答
0

某事 在某些事件触发功能中像这样（可以是时间间隔）：

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

有关更多信息（例如发送帖子/获取），请查看此处：
jQuery - 加载

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

于 2013-06-23T13:18:56.093 回答