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

ちょっと。いくつかのイベントトリガー関数でこのように（時間間隔のいずれかにすることができます）：

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

詳細 (post/get の送信など) については、こちらを確認してください:
jQuery - load

PS：「ajax」jquery関数も使用できます

于 2013-06-23T13:18:56.093 に答える
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 に答える