[英]How can I refresh the results of a MySQL query without refreshing the page?
我想定期刷新查詢的結果,例如每10到30秒。 我不確定如何將我在網上閱讀的代碼實現為自己的代碼,這在很多情況下都是不同的。
MySQL查詢與jQuery及其他所有內容位於同一頁上。
目前,我使用以下PHP代碼檢索MySQL表的值:
$result = mysqli_query($con,"SELECT * From auction WHERE category = 'Bathroom' ORDER BY ID DESC");
while($row = mysqli_fetch_array($result))
{
echo "<form name='auction' id='auction" . $row['ID'] . "'>
<input type='hidden' name='id' value='" . $row['ID'] . "' />
<div class='auction-thumb'>
<div class='auction-name'>" . $row['Item'] . "</div>";
echo "<img class='auction' src='" . $row['ImagePath'] . "' />";
echo "<div class='auction-bid'>Current Bid: £<div class='nospace' id='" . $row['ID'] . "'>" . $row['CurrentBid'] . "</div></div>";
echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname' autocomplete='off'/></div>";
echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid' autocomplete='off'/></div>";
echo "<div class='auction-bid'><input type='submit' name='submit' value='Place Bid!' /></div>";
echo "</div></form>";
}
echo "</table>";
mysqli_close($con);
?>
這將檢索多行,並填充頁面。
我想經常刷新或“重新運行”此查詢,以便更新當前出價。
我已經有這個jQuery代碼,它將新出價發布到PHP頁面,目前,其他任何查看此頁面的人只有手動刷新頁面后才能看到新出價。
<script>
$(document).ready(function(){
$('form[name="auction"]').submit(function(){
var id = $(this).find('input[name="id"]').val();
var bidname = $(this).find('input[name="bidname"]').val();
var bid = $(this).find('input[name="bid"]').val();
var currentbid = $('#'+id).text();
var itemdesc = $(this).find('.auction-name').text();
if (bidname == '')
{
alert("No name!")
return false;
}
if (bid > currentbid)
{
alert("Bid is greater than current bid");
}
else
{
alert("Bid is too low!");
return false;
}
$.ajax({
type: "POST",
url: "auction-handler.php",
data: {bidname: bidname, bid: bid, id: id, itemdesc: itemdesc},
success: function(data){
window.location.reload();
}
});
return false;
});
});
</script>
我的auction-handler.php代碼:
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
$con=mysqli_connect("xxxx","xxxx","xxxx","xxxx");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$bidname = $_POST['bidname'];
$bid = $_POST['bid'];
$id = $_POST['id'];
$itemdesc = $_POST['itemdesc'];
$query = "UPDATE auction SET CurrentBid = '$bid', Bidder = '$bidname' WHERE ID = '$id'";
$query2 = "INSERT INTO auction_log (Item, Bid, Bidder) VALUES ('$itemdesc','$bid','$bidname')";
mysqli_query($con, $query) or die(mysqli_error());
mysqli_query($con, $query2) or die(mysqli_error());
mysqli_close($con);
?>
我在網上閱讀的許多內容並不能真正幫到我,我是一個開端,無法自行編寫。 我確實很難理解如何做以及如何在自己的方案中實現它。
任何意見是極大的贊賞。
你不遠。
您需要做的是用ajax請求的響應替換相關表的html,而不是重新加載整個頁面。
所以代替:
success: function(data){
window.location.reload();
}
你可以做:
success: function(data){
$('#auction'+id).before(data).remove();
}
編輯
定期ajax請求:
的PHP:
//update-handler.php
$response = array();
$result = mysqli_query($con,"SELECT * From auction WHERE category = 'Bathroom' ORDER BY ID DESC");
while($row = mysqli_fetch_array($result)){
$response[] = (object)array('id'=>$row['ID'],'val'=>$row['CurrentBid']);
// get all the updated rows and put them into response array;
}
header('content-type=application/json');
exit(json_encode($response)); // send the json serialized response to jquery ajax
javascript:
var timeout = 30000 //30 seconds
setInterval(function () {
$.ajax({
type: "POST",
url: "update-handler.php",
success: function (data) {
$(data).each(function (i, d) { //loop though each bid amount from ajax response
$('#auction' + d.id).find('.nospace').html(d.val); //nospace is not a good target name, but its the only unique selector for that div
});
}
});
}, timeout);
<div id="results"> ... </div> <script> var time = 30000; function autoRefresh() { $.ajax({ type: "POST", dataType: "HMTL", url: "auction-handler.php", data: {bidname: bidname, bid: bid, id: id, itemdesc: itemdesc}, success: function(data){ $("#results").append(data); } }); } setTimeout("autoRefresh()", time); </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.