Обновить содержимое mysql div с помощью ajax

Question

Может кто-нибудь, пожалуйста, укажите мне в правильном направлении в отношении обновления определенного div с помощью ajax. Я знаю основы php, немного jquery, но Zero 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> 

На данный момент у меня есть немного обновления изображения, refreshses страницы OnClick с помощью JS. Идея обновления ajax будет намного приятнее.

Answer 1

сохранить свой код 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> 

Answer 2

smth. как это в каком-то событии срабатывает функцию (может быть временной интервал либо):

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

Для получения дополнительной информации (например, отправки поста/получить) проверить здесь:
jQuery - load

PS: Вы также можете использовать «Аякс 'функция JQuery