如何实时显示我的数据库（Php，js，jquery，AJAX）

Question

I would like to know how to display my database (mysql) in real time without sending too many queries to my database to not overload it . 我想知道如何实时显示数据库（mysql）， 而不会向数据库发送太多查询 而不会使数据库超载。 I know that it is necessary to use Ajax for that but I don't know how to use it correctly. 我知道有必要为此使用Ajax，但我不知道如何正确使用它。

For now I use JQuery with the load function to do this, can you give me your opinion and tell me how to do if this isn't the best solution(i know it's not), thank you! 现在，我使用带有加载功能的JQuery来执行此操作，如果这不是最好的解决方案（我知道不是），可以给我您的意见并告诉我该怎么做，谢谢！

Resume of my question: 继续我的问题：

How to display a mysql database in real time using php and ajax ? 如何使用php和ajax实时显示mysql数据库？ For example if I add a new order in my database i want to display it without refreshing my webpage. 例如，如果我在数据库中添加新订单，则我想显示它而不刷新我的网页。

Here is my code: 这是我的代码：

<!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 page for my connection to the database: (connect_db.php) 我与数据库的连接的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());  
}
?>

One of php my page with some queries (queryOrdersToPick.php): 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;
?>

Answer 1

You could add a timestamp to the orders, modify it on update and only request the orders with a higher timestamp as your last request. 您可以在订单中添加时间戳，在更新时对其进行修改，并且仅将具有较高时间戳的订单作为最后一个请求。

ALTER TABLE `orders`
ADD COLUMN `lastmodified` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP;

Answer 2

You're right to question polling your DB; 您有权质疑轮询数据库； that would be needlessly expensive. 那将不必要地昂贵。 Instead, I recommend: 相反，我建议：

Using WebSockets 使用WebSockets
Initially querying for ALL of the data 最初查询所有数据
Broadcast patches to the client when the DB is modified. 修改数据库后，将补丁广播到客户端。

This should be easy, if your CRUD handlers dispatch, directly or indirectly, the patch. 如果您的CRUD处理程序直接或间接分发该修补程序，这应该很容易。

Example: 例：

Client initially loads page 客户端最初加载页面
- client requests ALL data 客户要求所有数据
- client connects to WebSocket 客户端连接到WebSocket
  - client has WebSocket message handlers to update view when a patch is received 客户端具有WebSocket消息处理程序，可在收到补丁后更新视图
Server sends all data to client 服务器将所有数据发送到客户端
- on any CRUD operation to the DB, broadcast a message, to the client, ie: 在任何对DB的CRUD操作上，向客户端广播一条消息，即：
  { op: DELETE, rsrc: USER_TABLE, data } ( DELETE and USER_TABLE are enums). { op: DELETE, rsrc: USER_TABLE, data } （ DELETE和USER_TABLE是枚举）。

At the infrastructure / data level, you have a lot of options: 在基础架构/数据级别，您有很多选择：

cache eager-loaded data or lazy-load it 缓存预先加载的数据或延迟加载
queue patches 排队补丁
use protobufs or BSON (binary messaging) 使用protobufs或BSON （二进制消息传递）
bitmap your data to reduce payload sizes 对数据进行位图以减少有效负载大小
H2 and IPv6 support H2和IPv6支持

Server push propagation (via SSE or WebSockets), caching, queueing , and lazy-loading will be your friends for this. 服务器推送传播（通过SSE或WebSocket），缓存，排队和延迟加载将是您的朋友。

如何实时显示我的数据库（Php，js，jquery，AJAX）

问题描述

2 个解决方案

解决方案1
0 2018-10-19 19:53:33

解决方案2
0 2018-10-20 03:12:02

如何实时显示我的数据库（Php，js，jquery，AJAX）

问题描述

2 个解决方案

解决方案1 0 2018-10-19 19:53:33

解决方案2 0 2018-10-20 03:12:02

解决方案1
0 2018-10-19 19:53:33

解决方案2
0 2018-10-20 03:12:02