我可以让 hx-trigger 响应非 htmx 请求中的 HX-Trigger 标头吗？

Question

我正在努力让 hx-trigger 响应 PUT 请求中的 HX-Trigger 标头，我不从 htmx 元素发送。我有以下请求（在哈巴狗中有所简化）：

form
    input(
        id="rfile"
        name="rfile"
        type="file"
    )
    button(type="button" onclick="saveFile()") Upload
    script(type="text/javascript").
        async function saveFile() {
            var fileInput = document.getElementById('rfile').files[0];

            if (fileInput) {
                var reader = new FileReader();
                reader.onload = function() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('PUT', '/dataset/', true);
                    xhr.setRequestHeader('Content-Type', 'application/x-zip-compressed'); // Set the appropriate Content-Type
                    xhr.send(atob(reader.result.split(',')[1])); // Send the ArrayBuffer as the request body
                };
                reader.readAsDataURL(fileInput); // Read the file as an ArrayBuffer
            } else {
                console.log('Please select a file.');
            }
        }

上面向 Web 服务器发送了一个请求，其中包含正文中的原始文件内容。不幸的是，我无法使用

multipart/form-data

提交请求，因为正文必须完全由原始文件组成。

以上请求发送成功。对请求的响应如下所示：

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
HX-Trigger: refreshDatasets
...

我添加了

HX-Trigger: refreshDatasets

标头，希望能够在 DOM 中的其他地方触发以下内容：

div(id="datasetList" hx-get="/datasets" hx-trigger="load, refreshDatasets from:body")

但是，当服务器返回响应时，什么也没有发生。我知道该元素将响应

HX-Trigger

标头而触发，因为它会响应 HTMx 元素的 created 和 sent 请求而触发。然而，当我上面手动创建的 XHR 请求返回响应时，什么也没有发生。

有没有办法可以通过对我手动创建的 XHR 请求的响应来触发此元素？或者，也许我应该以不同的方式发送我的初始请求，以便它能够触发来自

datasetList

的 GET 请求？

如有任何帮助，我们将不胜感激！

Answer 1

我认为使用原始 xhr 时不可能。您需要使用 htmx.ajax api 来允许 htmx 为您处理响应标头。

您可以通过处理

xhr.onloadend

回调来完成类似的事情，无需太多更改：

var xhr = new XMLHttpRequest();

xhr.onloadend = () => {
    // Request finished. Do processing here.
    htmx.trigger('body', 'refreshDatasets')
};