个人中心
gpt4 book ai didi

javascript - 如何实时显示我的数据库(Php、js、jquery、AJAX)

转载 作者：行者123 更新时间：2023-11-29 16:49:19 28 4
gpt4 key购买 nike

我想知道如何实时显示我的数据库 (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;

关于javascript - 如何实时显示我的数据库(Php、js、jquery、AJAX)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52898973/

28 4 0
文章推荐： php - MediaWiki 数据库中的访问被拒绝，甚至影响 SQL 查询
文章推荐： php - 引用 - 这个错误在 PHP 中意味着什么？
文章推荐： php - Laravel 自定义关系
文章推荐： php - 如何让我的 html/php 代码从 1 个提交按钮定向到两个不同的页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com