我正在使用 htmx javascript API 如何从服务器获取响应

Question

我的代码块看起来像这样，基本上，当触发模式时，我发送 GET 请求并检索响应，它确实发送了请求，但我无法看到（或者更好地说）从通过来自 htmx 的 .then() 服务器。我正在使用那里文档中的示例。

htmx.ajax('GET',
    '/user-related-comment/',
    { swap: 'none', values: { userId: userId } }
).then(data => {
    console.log(data)
})

登录到浏览器控制台时，

data

为

undefined

。

Answer 1

对于需要执行此操作的任何人，可以选择收听

'htmx:afterOnLoad'

事件示例。

    htmx.ajax('GET', '/example', '#myDiv').then(() => {
      document.body.addEventListener('htmx:afterOnLoad', event=>{
    console.log(event)
   // access response at event.detail.xhr.response
   // convert to JavaScript object by JSON.parse(event.detail.xhr.response)
  })
});

由于某种原因，第一次点击时没有任何反应。

Answer 2

htmx.ajax()

方法的全部目的是触发HTMX逻辑：发出请求，获取响应并将其插入到文档中。它不仅仅用于从服务器获取数据。

您显然可以使用

htmx:afterOnLoad

来获取响应，如果您需要将响应插入到页面上的某个位置并且 进行一些额外的手动处理，这可以被视为有效选项。在这种情况下，您需要在发送 ajax 请求之前添加事件侦听器（这就是它在第一次单击时不起作用的原因）。 如果您只需要获取数据，则只需

fetch

或

XMLHttpRequest

。请参阅

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

。 使用 HTMX 获取

根据您的问题，我假设您只需要获得响应（基于

swap: 'none'

选项），所以这里是您如何使用 HTMX 来做到这一点（不知道为什么您要这样做）：

handler

对象中有

context

字段，

htmx.ajax

可以在第三个参数中接受。这是一个将返回 XHR 请求的函数

function doHtmxAjax(method, url, options) {
    return new Promise(resolve => {
        options = options || {};
        htmx.ajax(method, url, {
            ...options,
            swap: 'none',
            handler: (_, r) => resolve(r.xhr)
        })
    })
}

用途：

doHtmxAjax('GET',
    '/user-related-comment/',
    { values: { userId: userId } }
).then(data => {
    console.log(data)
})