当前位置：首页 > 文章列表 > 文章 > php教程 > jQuery实现div局部刷新技巧

jQuery实现div局部刷新技巧

2026-02-01 08:24:40 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《jQuery 实现局部刷新 div 方法》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

如何通过 jQuery 实现局部刷新指定 div（无需整页重载）

本文详解如何使用 jQuery 的 `.load()` 方法动态刷新页面中某个特定 div 的内容，避免整页刷新，并指出常见错误（如未引入 jQuery 库、拼写错误、HTML 结构问题），提供可直接运行的完整示例与最佳实践。

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

），而非重新加载整个页面。jQuery 提供了简洁高效的 .load() 方法来实现这一目标。其核心原理是：向服务器发起 AJAX 请求，获取指定 URL 中匹配选择器的 HTML 片段，并将其注入目标元素。

以下是一个典型且可运行的实现方案：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>局部刷新示例</title>
  <!-- ✅ 必须引入 jQuery（推荐使用 CDN，版本 ≥ 3.0） -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"
          integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
          crossorigin="anonymous"></script>
</head>
<body>
  <!-- ✅ 目标容器：id 唯一，结构清晰 -->
  <div id="reloadable">
    <?php include 'rand.php'; ?>
  </div>

  <!-- ✅ 触发按钮：绑定点击事件 -->
  <button class="ref" onclick="refreshDiv();">刷新数字</button>

  <script>
    function refreshDiv() {
      // ✅ 正确用法：从当前页面 URL 加载 #reloadable 内部内容（注意空格！）
      $('#reloadable').load(location.href + ' #reloadable');
    }
  </script>
</body>
</html>

配套的 rand.php 文件内容如下（确保与 HTML 同目录）：

<?php
echo rand(0, 10);
?>

? 关键要点与常见陷阱解析：

✅ jQuery 库必须提前加载：.load() 是 jQuery 方法，若未引入或引入失败（如路径错误、网络阻塞），脚本将静默失效。务必检查浏览器控制台是否报 ReferenceError: $ is not defined。
⚠️ 拼写纠错：原文中