如何创建自动加载AJAX请求结果的Bootstrap模态窗口

我来帮你搞定这个加载AJAX内容的Bootstrap模态框，咱们一步步来：

首先先补全并优化你的模态框结构，重点给内容区域留好可替换的容器，方便后续插入AJAX返回的内容：

{{--Bootstrap模态框--}}
<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Electronic mail title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 专门用来加载AJAX内容的容器 -->
      <div id="modalContent" class="modal-body">
        <!-- AJAX请求结果会插入到这里 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- 触发模态框的示例按钮 -->
<button id="loadMailBtn" class="btn btn-primary">查看邮件内容</button>

接下来写JavaScript逻辑，实现点击按钮发送AJAX请求、填充内容并显示模态框：

// 给触发按钮绑定点击事件
document.getElementById('loadMailBtn').addEventListener('click', function() {
  // 发送AJAX请求，替换成你的实际接口地址
  fetch('/your-mail-api-url')
    .then(response => {
      if (!response.ok) {
        throw new Error('请求失败，请稍后重试');
      }
      // 如果接口返回HTML用text()，返回JSON就用json()
      return response.text();
    })
    .then(data => {
      // 把AJAX返回的内容插入到模态框内容区
      document.getElementById('modalContent').innerHTML = data;
      // 显示模态框 - 这里提供两种方式，选你项目用的即可
      // jQuery方式（如果引入了jQuery）：
      $('#exampleModal').modal('show');
      // 原生Bootstrap JS方式：
      // new bootstrap.Modal(document.getElementById('exampleModal')).show();
    })
    .catch(error => {
      // 处理请求错误的情况
      document.getElementById('modalContent').innerHTML = `<p class="text-danger">加载失败：${error.message}</p>`;
      $('#exampleModal').modal('show');
    });
});

// 可选优化：模态框关闭时清空内容，避免下次打开显示旧数据
$('#exampleModal').on('hidden.bs.modal', function() {
  document.getElementById('modalContent').innerHTML = '';
});

几个需要注意的细节：

• 确保你的项目已经正确引入Bootstrap的CSS和JS文件，若用jQuery方式还要引入jQuery
• 把/your-mail-api-url替换成你实际的接口地址
• 如果接口返回的是JSON数据，需要把response.text()改成response.json()，然后在then里把JSON数据渲染成HTML再插入到模态框
• 关闭模态框时清空内容是个好习惯，能避免缓存旧内容影响体验

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