[英]How to display my database in real time (Php, js, jquery, AJAX)
我想知道如何實時顯示數據庫（mysql）， 而不會向數據庫發送太多查詢 而不會使數據庫超載 。 我知道有必要為此使用Ajax，但我不知道如何正確使用它。
現在，我使用帶有加載功能的JQuery來執行此操作，如果這不是最好的解決方案（我知道不是），可以給我您的意見並告訴我該怎么做，謝謝！
繼續我的問題：
如何使用php和ajax實時顯示mysql數據庫？ 例如，如果我在數據庫中添加新訂單，則我想顯示它而不刷新我的網頁。
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MGT Orders</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
section {
display: grid;
grid-template-rows: auto auto auto;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.container > div {
flex: 100%;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.container > div {
width: 100%;
}
}
@supports (-ms-accelerator:true) {
/* IE10+ CSS styles go here */
.container > div {
width: 100%;
}
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(0, -50%); }
}
</style>
</head>
<body class="bg-light-gray">
<section>
<article>
<div class="container">
<div class="tc fl f2-ns f3 pv2 b">Orders <span class="green">Created</span></div>
<div class="tc fl f4-ns pv2" id="ordersCreated"></div>
</div>
<div class="container bt b--black">
<div class="tc fl f2-ns f3 pt2 b ">Orders To <span class="yellow">Pick</span> </div>
<div class="tc fl f4-ns f5 ">Orders to <span class="orange">Ship</span> today in orange</div>
<div class="tc fl f4-ns f5 pb2 red">Late Orders in red</div>
<div class="tc fl f4-ns pv2 " id="ordersToPick"> </div>
</div>
<div class="container bt b--black">
<div class="tc fl f2-ns f3 pv2 b">Orders <span class="blue">Invoiced</span></div>
<div class="tc fl f4-ns pv2 " id="ordersInvoiced"> </div>
</div>
</article>
</section>
<script type="text/javascript">
setInterval('load_orders()', 500);
function load_orders() {
$('#ordersCreated').load('queryOrdersCreated.php');
$('#ordersToPick').load('queryOrdersToPick.php');
//$('#ordersToShip').load('queryOrdersToShip.php');
$('#ordersInvoiced').load('queryOrdersInvoiced.php');
if ($("body").height() > screen.height) {
$("article").css("animation", "marquee 50s linear infinite" );
}
else {
$("article").removeAttr('style');
}
if ($(document).scrollTop() > 0 ) {
$("article").removeAttr('style');
}
}
</script>
</body>
</html>
我與數據庫的連接的PHP頁面：（connect_db.php）
<?php
$db_name = 'warehouseproject';
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}
?>
PHP頁面之一，其中包含一些查詢（queryOrdersToPick.php）：
<?php
//header("Refresh:1");
include('connect_db.php');
$sqlPick = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` > 0 AND `Invoice` = "" AND `Ship Date` > date_format(CURRENT_DATE(), "%m/%d/%Y") ORDER BY `Reserved` DESC';
$sqlPickShip = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` > 0 AND `Invoice` = "" AND `Ship Date`= date_format(CURRENT_DATE(), "%m/%d/%Y") ORDER BY `Reserved` DESC';
$sqlLatePickShip = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` > 0 AND `Invoice` = "" AND `Ship Date` < date_format(CURRENT_DATE(), "%m/%d/%Y") ORDER BY `Reserved` DESC';
$queryPick = mysqli_query($conn, $sqlPick);
$queryPickShip = mysqli_query($conn, $sqlPickShip);
$queryLatePickShip = mysqli_query($conn, $sqlLatePickShip);
if (!$queryPickShip || !$queryPick || !$queryLatePickShip) {
die ('SQL Error: ' . mysqli_error($conn));
}
$noLatePickShip = 0;
while ($rowLatePickShip = mysqli_fetch_array($queryLatePickShip))
{
echo '<div class="pa2 bg-red ba b--white br-pill"> SO <b>'.$rowLatePickShip['SO'].'</b>
<div>'.$rowLatePickShip['Reserved'].' Items</div> </div> '/*
---- Ship date: <b>'. date('m/d/Y', strtotime($rowLatePickShip['Ship Date']))
.'</b></div>'*/;
$noLatePickShip++;
}
$noPickShip = 0;
while ($rowPickShip = mysqli_fetch_array($queryPickShip))
{
echo '<div class="pa2 bg-orange ba b--white br-pill"> SO <b>'.$rowPickShip['SO'].'</b>
<div>'.$rowPickShip['Reserved'].' Items</div> </div> '/*
<b>'.$rowPickShip['Reserved'].'</b> </div> '/*
---- Ship date: <b>'. date('m/d/Y', strtotime($rowPickShip['Ship Date']))
.'</b></div>'*/;
$noPickShip++;
}
$noPick = 0;
while ($rowPick = mysqli_fetch_array($queryPick))
{
echo '<div class="pa2 bg-gold ba b--white br-pill"> SO <b>'.$rowPick['SO'].'</b>
<div>'.$rowPick['Reserved'].' Items</div> </div> '/*
<b>'.$rowPick['Reserved'].'</b> </div> '/*
---- Ship date: <b>'. date('m/d/Y', strtotime($rowPick['Ship Date']))
.'</b></div>'*/;
$noPick++;
}
$totalPick = $noLatePickShip + $noPick + $noPickShip;
?>
您可以在訂單中添加時間戳，在更新時對其進行修改，並且僅將具有較高時間戳的訂單作為最后一個請求。
ALTER TABLE `orders`
ADD COLUMN `lastmodified` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP;
您有權質疑輪詢數據庫； 那將不必要地昂貴。 相反，我建議：
如果您的CRUD處理程序直接或間接分發該修補程序，這應該很容易。
例：
{ op: DELETE, rsrc: USER_TABLE, data } （ DELETE和USER_TABLE是枚舉）。 在基礎架構/數據級別，您有很多選擇：
如何根據AJAX / PHP / JAVASCRIPT的另一列實時顯示數據值？
[英]How to display data value in real time depending on the other column with AJAX/PHP/JAVASCRIPT?
每次更改的實時總和以及如何使用 ajax php mysql 處理它
[英]Real time sum every on change and how to process it with ajax php mysql
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.