本文介绍如何在不刷新页面的前提下，动态加载数据库中新增的商品数据，通过 ajax 轮询 + 后端增量查询实现高效、无闪烁的实时更新。
本文介绍如何在不刷新页面的前提下，动态加载数据库中新增的商品数据，通过 ajax 轮询 + 后端增量查询实现高效、无闪烁的实时更新。
在电商类或商品展示型 Web 应用中，用户期望看到“实时上新”——即后台添加新商品后，前端列表能自动呈现，无需手动刷新。直接使用 setInterval 配合 .load() 全量重载（如 $('#players').load(...)）不仅性能差、易造成闪烁与重复渲染，还可能因 DOM 结构不一致导致 JS 事件丢失或样式错乱。
更优解是采用增量式轮询（Polling with Last ID Tracking）：前端记录已加载商品的最大 ID，每次请求仅拉取该 ID 之后的新商品 HTML 片段，并追加到现有列表末尾。
✅ 正确实现步骤
1. 前端：轮询 + 增量请求
<!-- 确保容器 ID 准确（原代码中为 'parnet'，但 JS 写成 'parent'，需统一） -->
<div id="store-container" class="row">
<div id="players" class="col-12">
<!-- 初始 PHP 渲染的商品列表 -->
<?php foreach ($players as $player): ?>
<div class="col-lg-6 col-xl-3 mb-4">
<div class="card text-center">
<div class="card-body">
<!-- 商品结构保持不变 -->
<div class="row m-b-30">
<div class="col-md-5 col-xxl-6">
<div class="new-arrival-product mb-4 mb-xxl-4 mb-md-0">
<div class="new-arrivals-img-contnent">
<img class="img-fluid"
src="<?= baseUrl() ?>/upload/images/players/<?= htmlspecialchars($player['image']) ?>"
alt="<?= htmlspecialchars($player['playerName']) ?>">
</div>
</div>
</div>
<div class="col-md-7 col-xxl-6">
<div class="new-arrival-content position-relative">
<h4><?= htmlspecialchars($player['playerName']) ?></h4>
<p>Buy Now Price <span class="item text-success"><?= htmlspecialchars($player['buyPrice']) ?></span></p>
<p>Market Price: <span class="item text-success"><?= htmlspecialchars($player['marketPrice']) ?></span></p>
<p>Price In Dollar: <span class="item text-success"><?= htmlspecialchars($player['price']) ?></span></p>
</div>
<button type="button" class="btn btn-rounded btn-primary btn-sm">
<span class="btn-icon-left text-primary"><i class="fa fa-shopping-cart"></i></span>Buy
</button>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// 初始化 lastId：取当前列表最后一个商品的 data-id 属性（需后端在 PHP 中注入）
let lastId = <?= !empty($players) ? (int)$players[count($players)-1]['id'] : 0 ?>;
function fetchNewProducts() {
$.get('/api/get-new-players.php', { last_id: lastId })
.done(function (response) {
try {
const data = JSON.parse(response);
if (!data.error && Array.isArray(data.items) && data.items.length > 0) {
// 更新 lastId 为最新商品 ID
lastId = data.items[data.items.length - 1].id;
// 追加新商品 HTML（注意：后端返回的是完整 <div class="col-lg-6..."> 片段）
$('#players').append(data.html);
// 可选：触发动画或提示
console.log(`Loaded ${data.items.length} new products`);
}
} catch (e) {
console.warn('Invalid JSON response:', response);
}
})
.fail(function (xhr) {
console.error('Fetch failed:', xhr.status, xhr.statusText);
});
}
// 每 3 秒轮询一次（避免过于频繁，生产环境建议 5–10s 或改用 SSE/WebSocket）
setInterval(fetchNewProducts, 3000);
});
</script>2. 后端（PHP 示例：/api/get-new-players.php）
<?php
header('Content-Type: application/json; charset=utf-8');
require_once '../config/database.php'; // 引入数据库连接
$lastId = (int)($_GET['last_id'] ?? 0);
$response = ['error' => false, 'message' => '', 'items' => [], 'html' => ''];
try {
$stmt = $pdo->prepare("
SELECT id, playerName, buyPrice, marketPrice, price, image
FROM players
WHERE id > ?
ORDER BY id ASC
LIMIT 20
");
$stmt->execute([$lastId]);
$newPlayers = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (!empty($newPlayers)) {
$html = '';
foreach ($newPlayers as $p) {
$html .= '<div class="col-lg-6 col-xl-3 mb-4">';
$html .= '<div class="card text-center"><div class="card-body">';
$html .= '<div class="row m-b-30">';
$html .= '<div class="col-md-5 col-xxl-6">';
$html .= '<div class="new-arrival-product mb-4 mb-xxl-4 mb-md-0">';
$html .= '<div class="new-arrivals-img-contnent">';
$html .= '<img class="img-fluid" src="' . htmlspecialchars(baseUrl() . '/upload/images/players/' . $p['image']) . '" alt="' . htmlspecialchars($p['playerName']) . '">';
$html .= '</div></div></div>';
$html .= '<div class="col-md-7 col-xxl-6">';
$html .= '<div class="new-arrival-content position-relative">';
$html .= '<h4>' . htmlspecialchars($p['playerName']) . '</h4>';
$html .= '<p>Buy Now Price <span class="item text-success">' . htmlspecialchars($p['buyPrice']) . '</span></p>';
$html .= '<p>Market Price: <span class="item text-success">' . htmlspecialchars($p['marketPrice']) . '</span></p>';
$html .= '<p>Price In Dollar: <span class="item text-success">' . htmlspecialchars($p['price']) . '</span></p>';
$html .= '</div><button type="button" class="btn btn-rounded btn-primary btn-sm">';
$html .= '<span class="btn-icon-left text-primary"><i class="fa fa-shopping-cart"></i></span>Buy</button>';
$html .= '</div></div></div></div></div>';
}
$response['items'] = $newPlayers;
$response['html'] = $html;
}
} catch (Exception $e) {
$response['error'] = true;
$response['message'] = 'Database query failed';
}
echo json_encode($response, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);⚠️ 关键注意事项
- ID 必须连续且单调递增：last_id 依赖主键自增特性，若业务允许逻辑删除或 ID 不连续，应改用时间戳（created_at > ?）+ 索引优化。
- 防重复与竞态：前端需确保 lastId 严格递进；后端 SQL 使用 ORDER BY id ASC 保证顺序。
-
性能优化：
- 避免高频轮询（≤ 3s），可结合用户活跃状态动态调整间隔；
- 数据库字段加索引：ALTER TABLE players ADD INDEX idx_last_id (id);
- 安全性：所有输出到 HTML 的变量必须 htmlspecialchars() 转义，防止 XSS；API 接口应校验权限（如仅限登录用户访问）。
- 渐进增强：可配合 Intersection Observer 懒加载 + 分页，或升级为 Server-Sent Events（SSE）/WebSocket 实现真正实时推送。
通过上述方案，你将获得一个稳定、安全、可维护的无刷新商品更新机制，显著提升用户体验与系统响应效率。
