
本文详解如何使用 jquery 的 `.load()` 方法局部刷新页面中某个 specific div,避免整页重载,并指出常见错误(如 jquery 未引入、拼写错误、html 结构问题)及完整可运行解决方案。
在 Web 开发中,为提升用户体验,常需“局部刷新”——仅更新页面中某一块内容(如一个
✅ 正确实现步骤
-
确保 jQuery 已正确引入
这是最常见的失败原因。原代码中 <script type="text/<a style=" color: text-decoration:underline title="java" href="https://www.php.cn/zt/15731.html" target="_blank">javacript"> 存在两个致命问题: <ul><li>type 属性值拼写错误(应为 text/<a style="color:#f60; text-decoration:underline;" title= "javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript); </script> - 更关键的是——完全未引入 jQuery 库,导致 $ 未定义,$('#reloadable') 直接报错。
必须在使用 jQuery 前,通过 CDN 或本地文件加载:
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>-
.load() 的语法必须精准
正确用法是:$('#reloadable').load(location.href + ' #reloadable');含义是:向当前页面 URL 发起 AJAX 请求,获取响应 HTML 中 #reloadable 元素的 内部 HTML(不包含外层标签),并替换到当前页面的 #reloadable 中。
⚠️ 注意:location.href + ' #reloadable' 是 jQuery 特有的“选择器加载”语法(需服务端返回完整 HTML 文档),它依赖服务器能正常响应整个 PHP 页面(含 rand.php 动态内容)。 PHP 内容需支持动态重载
rand.php 应保持独立可执行逻辑(如仅输出随机数),且主页面中通过 初始渲染是合理的。每次 .load() 触发时,浏览器会重新请求当前 PHP 页面,服务端再次执行 include 'rand.php',从而生成新随机数——这正是局部刷新的核心机制。
✅ 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<title>局部刷新 div 示例</title>
<!-- ✅ 必须放在所有自定义脚本之前 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<!-- 初始内容由 PHP 渲染 -->
<div id="reloadable">
<?php include 'rand.php'; ?>
</div>
<!-- ✅ 使用标准 onclick,无需 "javascript:" 前缀(冗余但不影响) -->
<button class="ref" onclick="refreshDiv()">刷新数字</button>
<script>
function refreshDiv() {
// ✅ 正确语法:从当前 URL 加载 #reloadable 的子内容
$('#reloadable').load(location.href + ' #reloadable');
}
</script>
</body>
</html>rand.php(保持不变):
<?php $a = rand(0, 10); echo $a; ?>
⚠️ 关键注意事项
- 不要将 jQuery 引入放在










