如何实现点击按钮时刷新Div内容（不刷新整个页面）

要实现点击带唯一ID的按钮时，不刷新整个页面就更新Div内的数据和脚本，你可以用jQuery的AJAX来动态替换Div内容，以下是具体实现方案：

核心思路 #

1. 给按钮添加唯一ID，精准绑定点击事件
2. 通过AJAX获取最新的Div内容（包含数据和脚本），替换原有内容
3. jQuery会自动执行新内容中的<script>标签，满足脚本刷新需求

修改后的完整代码 #

HTML结构 #

<button type="button" id="refreshBtn">Refresh DIV</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
  <!-- 初始内容示例 -->
  <p>当前数据：123</p>
  <script>
    console.log('初始脚本已执行');
  </script>
</div>

JavaScript逻辑 #

// 绑定唯一ID按钮的点击事件
$('#refreshBtn').on('click', function() {
  // 场景1：从后端接口获取最新内容（推荐，适用于数据从服务端获取的场景）
  $.ajax({
    url: '/get-updated-container', // 替换为你的实际接口地址
    method: 'GET',
    success: function(newContent) {
      // 替换container的全部内容，自动执行新内容里的脚本
      $('#container').html(newContent);
    },
    error: function() {
      alert('刷新失败，请稍后重试');
    }
  });

  // 场景2：前端直接生成新内容（适用于数据在前端计算的场景）
  // var randomData = Math.floor(Math.random() * 1000);
  // var newContent = `
  //   <p>当前数据：${randomData}</p>
  //   <script>
  //     console.log('刷新后脚本执行，当前数据：${randomData}');
  //   <\/script>
  // `;
  // $('#container').html(newContent);
});

关键细节 #

• 唯一ID按钮：用#refreshBtn绑定事件，避免误触发其他按钮
• 局部刷新原理：html()方法仅替换目标Div的内部内容，不会触发页面全局刷新
• 脚本自动执行：当插入包含<script>的HTML时，jQuery会自动解析并执行这些脚本，无需额外处理
• 两种场景可选：根据你的数据来源选择后端接口请求或前端生成内容的方式

内容的提问来源于stack exchange，提问作者James Williams