ページを更新せずにMySQLクエリの結果を更新するにはどうすればよいですか？

Question

私は定期的に、10-30秒ごとに言ったクエリの結果をリフレッシュしたいと思っています。私は、シナリオが異なる多くの時間として私が自分のコードにオンラインで読み込んだコードを実装する方法が不明です。

MySQLのクエリは、私のjQueryと他のすべてと同じページにあります。

$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); 

?> 

これは、複数の行を取得し、彼らはページを読み込む：

現在、私は、PHPコードのこのビットを使用してMySQLのテーブルの値を取得します。

現在の入札が更新されるように、私は、しょっちゅうこのクエリをリフレッシュまたは「再実行」したいと思います。彼らは素晴らしいではありませんページを手動で更新するまで

私はすでにどのポストこの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> 

マイオークション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); 
?> 

の事、私は本当に私を助けていないオンライン読んだことがあると私はbegginerのあまり午前の多くは、それを自分で書くことができるようにします正しく。私は本当にやり方を理解するのに苦労しています。私は自分のシナリオでそれをどのように実装することができますか。

アドバイスをいただければ幸いです。

Answer 1

あなたは遠くないです。あなたがする必要がどのような

ではなく、ページ全体をリロードするよりも、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); 

Answer 2

<div id="results"> 
 
\t ... 
 
</div> 
 

 
<script> 
 
var time = 30000; 
 
function autoRefresh() 
 
{ 
 
\t $.ajax({ 
 
\t \t type: "POST", 
 
\t \t dataType: "HMTL", 
 
\t \t url: "auction-handler.php", 
 
\t \t data: {bidname: bidname, bid: bid, id: id, itemdesc: itemdesc}, 
 
\t \t success: function(data){ 
 
\t \t \t $("#results").append(data); 
 
\t \t } 
 
\t }); 
 
} 
 

 
setTimeout("autoRefresh()", time); 
 
</script>