如何用纯JavaScript在Bootstrap 4中实现AJAX错误时打开模态框？

当然可以实现，Bootstrap 4本身提供了原生JavaScript组件，无需依赖jQuery就能操作模态框。以下是具体实现步骤：

1. 编写Bootstrap 4模态框HTML结构 #

先在页面中定义用于展示错误的模态框：

<!-- 错误提示模态框 -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="errorModalLabel">请求出错</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="errorMsg">请求过程中发生未知错误</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

2. 纯JavaScript发送AJAX并处理错误 #

你可以使用XMLHttpRequest或fetch API发送请求，在错误分支中调用Bootstrap模态框的show()方法打开弹窗。

方式一：使用XMLHttpRequest #

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取模态框元素并初始化Bootstrap Modal实例
  const errorModal = document.getElementById('errorModal');
  const modalInstance = new bootstrap.Modal(errorModal);
  const errorMsgEl = document.getElementById('errorMsg');

  // 定义发送AJAX请求的函数
  function sendAjaxRequest() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/your-api-endpoint', true);

    xhr.onload = function() {
      // 处理状态码异常（如4xx、5xx）
      if (xhr.status < 200 || xhr.status >= 300) {
        errorMsgEl.textContent = `请求失败：状态码 ${xhr.status}`;
        modalInstance.show(); // 打开模态框
      } else {
        // 请求成功的处理逻辑
        console.log('请求成功');
      }
    };

    xhr.onerror = function() {
      // 处理网络连接错误
      errorMsgEl.textContent = '网络连接失败，请检查网络后重试';
      modalInstance.show(); // 打开模态框
    };

    xhr.send();
  }

  // 触发请求（可根据实际场景调用，比如点击按钮时）
  sendAjaxRequest();
});

方式二：使用Fetch API #

document.addEventListener('DOMContentLoaded', function() {
  const errorModal = document.getElementById('errorModal');
  const modalInstance = new bootstrap.Modal(errorModal);
  const errorMsgEl = document.getElementById('errorMsg');

  // 异步发送请求
  async function sendFetchRequest() {
    try {
      const response = await fetch('/your-api-endpoint');
      if (!response.ok) {
        // 抛出状态码异常
        throw new Error(`请求失败：状态码 ${response.status}`);
      }
      // 请求成功的处理逻辑
      console.log('请求成功');
    } catch (error) {
      // 捕获所有错误（网络错误、状态码错误等）
      errorMsgEl.textContent = error.message;
      modalInstance.show(); // 打开模态框
    }
  }

  sendFetchRequest();
});

注意事项 #

• 必须引入Bootstrap 4的bootstrap.bundle.min.js文件（该文件已包含Popper.js，是模态框正常工作的必要依赖），无需额外引入jQuery。
• 模态框实例化要在DOM加载完成后进行，避免找不到模态框元素。
• 可根据错误类型自定义提示文本，提升用户体验。

内容的提问来源于stack exchange，提问作者José Vicente López Delgadillo