Может кто-нибудь, пожалуйста, указать мне в правильном направлении в отношении обновления какого-либо 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>
На данный момент у меня есть небольшое обновленное изображение, которое обновляет страницу onClick через JS. Идея обновления ajax будет намного приятнее.
сохраните свой 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); ?>
в<?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>
что-л. например, в некотором событии, вызванном функцией (может быть и временной интервал):
$('.scoreBoard').load('path/to/php_fetching_data_and_building_table');
Для получения дополнительной информации (например, отправки сообщения / получения) проверьте здесь:
jQuery – загрузить
ps: вы также можете использовать функцию jQuery ajax