Bootstrap 5 Modal通过AJAX加载PHP数据失败报$未定义错误

Uncaught ReferenceError: $ is not defined 报错的直接原因是代码中使用了jQuery的全局$对象，但浏览器运行脚本时未找到该对象，导致你写的弹窗数据填充逻辑完全中断。
Bootstrap 5的组件交互基于原生JavaScript实现，不依赖jQuery，因此通过data-bs-*属性绑定的弹窗唤起逻辑可以正常运行，和你写的自定义JS逻辑互不影响。

方案1：保留jQuery写法，修复加载问题 #

如果要继续使用你已经写好的jQuery AJAX逻辑，按以下步骤排查修复：

• 确认已引入jQuery库
  若页面未加载jQuery，需要在你编写的自定义业务脚本之前引入jQuery库文件，注意不要把引入代码放在自定义脚本的后面。
• 确认引入顺序正确
  脚本加载的正确顺序为：jQuery库文件 → Bootstrap 5的JS文件 → 你自己写的弹窗监听、AJAX请求相关业务脚本。顺序颠倒就会出现$未定义的错误。
• 处理变量冲突
  若页面存在多版本jQuery共存、其他JS库占用$变量的情况，可以把你的自定义逻辑包裹在闭包中隔离作用域：

  (function($) {
    // 原有Modal监听逻辑全部放在闭包内部
    const modal = document.getElementById('bsMyModal')
    modal.addEventListener('show.bs.modal', function(event) {
      const triggerBtn = event.relatedTarget
      const rowId = triggerBtn.getAttribute('data-id')
      $.post('fetch_record.php', {rowid: rowId}, function(resp) {
        $('.fetched-data').html(resp)
      })
    })
  })(jQuery);
  

方案2：移除jQuery依赖，改用原生JS实现 #

Bootstrap 5本身不需要jQuery，你可以直接把AJAX逻辑改成原生写法，不需要额外加载库，代码更轻量：

const bsMyModal = document.getElementById('bsMyModal')
bsMyModal.addEventListener('show.bs.modal', function(event) {
  // 获取触发弹窗的操作按钮
  const triggerButton = event.relatedTarget
  const rowId = triggerButton.getAttribute('data-id')
  // 发起原生POST请求
  const formData = new FormData()
  formData.append('rowid', rowId)
  fetch('fetch_record.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(content => {
    document.querySelector('.fetched-data').innerHTML = content
  })
})

修复后清空浏览器缓存刷新页面，点击操作按钮，在浏览器开发者工具的网络面板中可以看到向fetch_record.php发起的POST请求，请求正常返回后弹窗内就会展示对应ID的内容。

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