如何通过 jQuery 无刷新重载指定 div 元素

本文详解如何使用 jquery 的 `.load()` 方法局部刷新页面中某个 specific div，避免整页重载，并指出常见错误（如 jquery 未引入、拼写错误、html 结构问题）及完整可运行解决方案。

在 Web 开发中，为提升用户体验，常需“局部刷新”——仅更新页面中某一块内容（如一个

✅ 正确实现步骤

1. 确保 jQuery 已正确引入
   这是最常见的失败原因。原代码中
2. 更关键的是——完全未引入 jQuery

   

   库，导致 $ 未定义，$('#reloadable') 直接报错。
   必须在使用 jQuery 前，通过 CDN 或本地文件加载：

2. .load() 的语法必须精准
   正确用法是：

   $('#reloadable').load(location.href + ' #reloadable');

   含义是：向当前页面 URL 发起 AJAX 请求，获取响应 HTML 中 #reloadable 元素的 内部 HTML（不包含外层标签），并替换到当前页面的 #reloadable 中。
   ⚠️ 注意：location.href + ' #reloadable' 是 jQuery 特有的“选择器加载”语法（需服务端返回完整 HTML 文档），它依赖服务器能正常响应整个 PHP 页面（含 rand.php 动态内容）。

3. PHP 内容需支持动态重载
   rand.php 应保持独立可执行逻辑（如仅输出随机数），且主页面中通过 初始渲染是合理的。每次 .load() 触发时，浏览器会重新请求当前 PHP 页面，服务端再次执行 include 'rand.php'，从而生成新随机数——这正是局部刷新的核心机制。

✅ 完整可运行示例

  
  
  


  
  
    
  

  
  刷新数字

  

rand.php（保持不变）：

⚠️ 关键注意事项

• 不要将 jQuery 引入放在

# ai  # 的是  # 放在  # 后端  # 这是  # 加载  # 自定义  # 浏览器  # 选择器  # 要将  # js  # javascript  # java  # html  # 接口  # 报错  # php  # 特有的  # cdn  # include  # location  # jquery  # ajax  # href  # 服务端  # 随机数  # innerHTML 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】