如何在Alpine JS中实现AJAX请求后显示、隐藏模态框

你提供的基础代码存在多余的非法空格（比如x -data、aria - expanded中间的空格会导致语法失效），修正后的可运行基础版本如下：

<div x-data="{ show: false }">
  <button 
    @click="show = !show" 
    :aria-expanded="show ? 'true' : 'false'" 
    :class="{ 'active': show }"
  >
    Toggle Show
  </button>
  <div x-show="show"> Hello world</div>
</div>

Alpine的响应式状态是自动监听更新的，只要修改x-data中绑定的show变量，x-show就会自动触发显隐更新，不管是同步的点击事件还是异步的AJAX回调中修改变量都生效，具体实现分两种常见场景：

场景1：AJAX逻辑写在Alpine组件内部（推荐） #

直接在异步回调中通过this访问show变量修改即可，示例代码：

<div x-data="{ show: false, modalContent: '' }">
  <button @click="fetchData">发起AJAX请求</button>
  <button 
    @click="show = !show" 
    :aria-expanded="show" 
    :class="{ 'active': show }"
  >
    手动切换显隐
  </button>
  <!-- 模态框内容 -->
  <div x-show="show" class="modal" x-text="modalContent"></div>

  <script>
    // 给当前Alpine组件注册请求方法
    const modalComp = document.querySelector('[x-data]')
    modalComp.__x.$data.fetchData = async function() {
      try {
        // 发起AJAX请求
        const response = await fetch('/api/your-endpoint')
        const result = await response.json()
        // 给模态框赋值返回内容
        this.modalContent = result.data
        // 请求成功后直接修改show变量，自动触发弹窗显示
        this.show = true
      } catch (error) {
        console.error('请求失败：', error)
        // 也可以在请求失败的分支修改show，弹出错误提示
        this.modalContent = '请求失败，请稍后重试'
        this.show = true
      }
    }
  </script>
</div>

场景2：AJAX逻辑写在Alpine组件外部 #

如果你的请求逻辑是全局公用的，只需要先拿到对应Alpine组件的实例，再修改show属性即可：

// 先获取绑定了x-data的模态框DOM元素
const modalComponent = document.querySelector('[x-data]')

// 全局公用的请求方法
async function globalFetchRequest() {
  const response = await fetch('/api/your-endpoint')
  const result = await response.json()
  // 修改组件的响应式变量
  modalComponent.__x.$data.modalContent = result.data
  modalComponent.__x.$data.show = true
}

// 触发请求
globalFetchRequest()

补充优化（Alpine V3+ 推荐写法） #

用Alpine.data封装组件逻辑，复用性和可读性更强：

// 全局定义模态框组件逻辑
Alpine.data('ajaxModal', () => ({
  show: false,
  modalContent: '',
  async fetchData() {
    try {
      const res = await fetch('/api/your-endpoint')
      const data = await res.json()
      this.modalContent = data.message
      this.show = true
    } catch (err) {
      this.modalContent = '请求失败，请稍后重试'
      this.show = true
    }
  }
}))

HTML部分简化为：

<div x-data="ajaxModal">
  <button @click="fetchData">发起请求</button>
  <div x-show="show" x-text="modalContent"></div>
</div>

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