如何在不刷新页面的情况下刷新MySQL查询的结果?

时间:2016-09-12 14:54:09

标签: javascript php jquery mysql

我想要定期刷新查询的结果,比如说每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);

?>

这会检索多行并填充页面。

我想刷新或重新运行&#39;此查询经常进行,以便更新当前出价。

我已经有了这个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);
?>

我在网上阅读的很多内容并没有真正对我有所帮助,而且我自己也不能正确地编写它。有些事我真的很难理解怎么做,以及如何在我的场景中实现它。

非常感谢任何建议。

2 个答案:

答案 0 :(得分:2)

你离我不远了。

您需要做的是将相关表的html替换为ajax请求的响应,而不是重新加载整个页面。

所以而不是:

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

答案 1 :(得分:0)

&#13;
&#13;
<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>
&#13;
&#13;
&#13;