使用Ajax刷新mysql div内容 [英] Refresh mysql div content using ajax

问题描述

有人可以向我指出正确的方向，以使用ajax刷新特定的div.我知道php的基础知识，有点jquery，但是零阿贾克斯(Ajax).我的计分板是使用php在一个表格中建立的，如下所示-

Could somebody please point me in the right direction as regards refreshing a particular div using ajax. I know the basics of php, a little jquery, but Zero ajax. My scoreboard is built using php within a table as follows -

<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刷新的想法会更好.

At the moment I have a little refresh image that refreshses the page onClick via JS. The idea of an ajax refresh would be much nicer.

推荐答案

将您的php代码保存在名为 somename.php 的文件中，然后使用阿贾克斯

save your php code in a file named somename.php then call it with 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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！