本文介绍如何使用 jquery + ajax 技术，无需整页刷新，仅更新页面中依赖 mysql 数据的指定 dom 区域（如计算结果展示框），提升用户体验与响应效率。
本文介绍如何使用 jquery + ajax 技术，无需整页刷新，仅更新页面中依赖 mysql 数据的指定 dom 区域（如计算结果展示框），提升用户体验与响应效率。
在 Web 开发中，频繁整页刷新不仅影响交互流畅性，还增加服务器负载和网络开销。针对您描述的场景——表单提交后需将计算结果存入 MySQL，并实时显示最新值于页面某区块（如
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
✅ 核心实现思路
- 分离关注点：将数据获取逻辑从 PHP 模板中剥离，交由独立 PHP 接口（如 fetch.php）处理；
- 前端定时拉取：使用 setInterval() 定期向服务端请求最新数据，并用 .load() 自动注入到目标元素；
- 提交后即时反馈（可选增强）：配合按钮点击事件，主动触发一次 AJAX 提交（如保存新值），再由轮询保障视图同步。
? 关键代码实现
1. 前端 JavaScript（含 jQuery）
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function() {
// 【可选】提交按钮点击时发送新值（如需立即写库）
$('#btn_submit').on('click', function(e) {
e.preventDefault(); // 阻止默认表单提交
const newBase = $('#new_base').val().trim();
if (newBase) {
$.post('db2.php', { new_base: newBase }, function() {
$('#new_base').val(''); // 清空输入框
});
}
});
// 【必需】每秒自动刷新 #load_data 区域内容
setInterval(function() {
$('#load_data').load('fetch.php').fadeIn('slow');
}, 1000);
});
</script>
2. 后端接口 fetch.php（安全读取最新数据）
<?php // fetch.php —— 专用于返回最新计算结果的轻量接口
require_once 'config.php'; // 包含 $con 数据库连接
// ✅ 使用预处理语句防止 SQL 注入（强烈推荐）
$stmt = $con->prepare("SELECT new_base FROM calculation ORDER BY id DESC LIMIT 1");
$stmt->execute();
$result = $stmt->get_result();
if ($row = $result->fetch_assoc()) {
echo htmlspecialchars($row['new_base'], ENT_QUOTES, 'UTF-8');
} else {
echo "—"; // 无数据时显示占位符
}
?>
3. 注意事项与优化建议
- ? 安全性优先：原始代码中直接拼接 SQL（如 "INSERT INTO ... VALUES('".$results_usd."')"）存在严重 SQL 注入风险。务必改用 mysqli_prepare() 或 PDO 预处理；
- ⏱️ 轮询频率权衡：1000ms 适合演示，生产环境建议根据业务容忍度调整为 3000–5000ms，或升级为 WebSocket/Server-Sent Events（SSE）实现真正实时推送；
- ? 避免重复渲染：.load() 已自动替换内容，无需手动 innerHTML 操作；若需更复杂逻辑（如高亮变化、错误提示），可改用 $.get() + 手动解析；
- ? 跨域与错误处理：确保前后端同源；添加 error 回调捕获网络异常，例如：
error: function() { $('#load_data').html('<span style="color:red">⚠️ 加载失败，请检查网络</span>'); }
通过以上结构化改造，您的页面即可实现“计算→存库→秒级视图更新”全流程无感刷新，兼顾开发简洁性与生产健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
