如何通过JavaScript调用HTMX发送带JSON请求体的POST请求？

场景背景 #

需要通过JavaScript动态触发请求：

• 发送POST请求并以JSON格式传递请求体到Spring Boot后端
• 后端返回带HTML标签和JS的Thymeleaf片段，要求插入DOM后JS能正常执行
• 不想使用显式表单，且原HTMX扩展在htmx.ajax调用中不生效

方案一：使用HTMX ajax方法发送JSON格式POST请求 #

方法1：复用已定义的HTMX扩展 #

先全局定义处理JSON请求的扩展，然后在htmx.ajax调用中指定使用该扩展：

1. 定义全局HTMX扩展

<script>
htmx.defineExtension('postrequestbody', {
    onEvent: function (name, evt) {
        if (name === "htmx:configRequest") {
            evt.detail.headers['Content-Type'] = "application/json"
            evt.detail.headers['X-API-Key'] = 'sjk_xxx'
        }
    },
    encodeParameters: function(xhr, parameters, elt) {
        xhr.overrideMimeType('text/json')
        return JSON.stringify(parameters)
    }
});
</script>

2. 调用htmx.ajax并指定扩展

try {
    htmx.ajax('POST', '/doSomething', {
        target: '#result',
        swap: 'innerHTML',
        extensions: ['postrequestbody'], // 启用扩展
        parameters: { // 传递请求体数据
            type: "type",
            param1: "param1"
        }
    });
} catch (htmxError) {
    console.error('HTMX error:', htmxError);
}

方法2：手动处理请求头与参数编码（无需扩展） #

通过beforeSend钩子直接控制请求的发送逻辑，跳过HTMX默认的参数编码：

try {
    htmx.ajax('POST', '/doSomething', {
        target: '#result',
        swap: 'innerHTML',
        parameters: {
            type: "type",
            param1: "param1"
        },
        beforeSend: function(xhr, parameters) {
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('X-API-Key', 'sjk_xxx');
            // 手动发送JSON格式的请求体
            xhr.overrideMimeType('text/json');
            xhr.send(JSON.stringify(parameters));
            // 返回false阻止HTMX默认的参数处理逻辑
            return false;
        }
    });
} catch (htmxError) {
    console.error('HTMX error:', htmxError);
}

方案二：使用Fetch请求并执行插入DOM的JS脚本 #

如果不想依赖HTMX的ajax方法，用Fetch获取内容后，需要手动处理脚本执行，或借助HTMX的process方法激活内容：

方法1：手动提取并执行脚本 #

async function fetchAndRender(url, targetSelector, requestData) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-API-Key': 'sjk_xxx'
            },
            body: JSON.stringify(requestData)
        });

        if (!response.ok) throw new Error(`HTTP错误：状态码 ${response.status}`);

        const htmlContent = await response.text();
        const target = document.querySelector(targetSelector);
        target.innerHTML = htmlContent;

        // 处理插入的script标签
        target.querySelectorAll('script').forEach(oldScript => {
            const newScript = document.createElement('script');
            // 复制外部脚本地址或内联代码
            oldScript.src ? newScript.src = oldScript.src : newScript.textContent = oldScript.textContent;
            // 复制原脚本的属性
            Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
            // 添加到head执行，执行后移除
            document.head.appendChild(newScript);
            newScript.onload = () => newScript.remove();
        });
    } catch (err) {
        console.error('Fetch请求失败：', err);
    }
}

// 调用示例
fetchAndRender('/doSomething', '#result', { type: "type", param1: "param1" });

方法2：借助HTMX的process方法处理内容 #

利用HTMX内置的htmx.process()方法，自动处理新插入HTML中的脚本和HTMX属性：

async function fetchWithHTMXProcess(url, targetSelector, requestData) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-API-Key': 'sjk_xxx'
            },
            body: JSON.stringify(requestData)
        });

        if (!response.ok) throw new Error(`HTTP错误：状态码 ${response.status}`);

        const htmlContent = await response.text();
        const target = document.querySelector(targetSelector);
        target.innerHTML = htmlContent;

        // 让HTMX处理新内容，包括执行脚本、激活HTMX组件
        htmx.process(target);
    } catch (err) {
        console.error('Fetch请求失败：', err);
    }
}

// 调用示例
fetchWithHTMXProcess('/doSomething', '#result', { type: "type", param1: "param1" });

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