Django中如何用HTMX在触发后动态传递参数发起请求？

在Django中，我想实现点击按钮后通过HTMX触发事件发起请求。当前后端视图代码如下：

def SomeView(request, var1, var2):
    trigger_data = json.dumps({"dlstart": {"pid": pid, "var1": var1}})
    return HttpResponse("", headers={"HX-Trigger": trigger_data})

网络面板显示GET请求已生效，但我希望把trigger_data中的两个参数动态添加到hx-get中，没找到纯HTMX实现方式，于是用了JS替代方案，现在想换成纯HTMX方案：

document.body.addEventListener("dlstart", function() {
    const url = `/someURL/${event.detail.pid}/${event.detail.var1}`;
    const filename = "test.png";

    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('was not ok');
            }
            return response.blob(); 
        })
        .then(blob => {
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename; 
            document.body.appendChild(link);
            link.click(); // 感觉很不优雅
            document.body.removeChild(link);
        })
});

我认为hx-get结合动态参数应该可以实现？

补充信息：

• SomeView仅通过按钮点击触发，按钮代码：

<button type="submit"
        id="start-dl-button"
        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
        hx-post="{% url 'start-dl' pid  var1 %}" 
        hx-on::before-request="document.getElementById('modal-container-{{ pid }}').innerHTML=''">
    Start DL
</button>

• 下载视图代码：

def DLView(request, pid, var1): 
    ## 处理逻辑        
    prod = Product.objects.get(id=pid)
    pdf = pdf_create(prod, var1)
    with open(pdf, "rb") as pdf_file:
        response = HttpResponse(pdf_file.read(), content_type="application/pdf")
        response["Content-Disposition"] = f"""attachment; filename="{pdf}" """ # 文件名未使用，见JS部分
        return response

• 路由配置：

path("someurl/<int:pid>/<str:var1>", DLView, name="some-url"),

不需要依赖JS，利用HTMX的事件监听、动态参数填充就能完成，分两种场景处理：

场景1：基于dlstart事件动态发起下载请求 #

在页面中添加一个隐藏元素，专门用来监听全局的dlstart事件，通过hx-vals从事件细节中提取参数并替换到请求URL中：

<!-- 隐藏的触发容器，处理dlstart事件 -->
<div id="dl-handler"
     style="display: none"
     hx-get="{% url 'some-url' 0 'placeholder' %}"
     hx-trigger="dlstart from:body"
     hx-vals='js:{pid: event.detail.pid, var1: event.detail.var1}'
     hx-swap="none"
     hx-replace-url="false">
</div>

关键细节： #

• hx-get中的0和'placeholder'是占位符，HTMX会自动用hx-vals里的参数替换URL中对应的路由片段
• hx-swap="none"：不需要处理响应内容，浏览器会自动识别下载类型的响应并触发下载
• hx-replace-url="false"：避免修改浏览器地址栏，保持原有页面状态

场景2：简化流程，直接从按钮发起下载（如果允许跳过SomeView） #

如果业务逻辑允许不需要经过SomeView的中间触发，按钮可以直接发起请求到下载视图：

<button type="button"
        hx-get="{% url 'some-url' pid var1 %}"
        hx-swap="none">
    Start DL
</button>

但如果pid和var1必须由SomeView动态返回，那么场景1的方案更合适。

额外注意事项 #

• 确保DLView返回的Content-Disposition头设置正确，浏览器会自动处理下载，无需JS创建链接模拟点击
• HTMX的hx-vals支持js:前缀执行JS表达式，从而获取事件对象中的细节参数
• 监听事件时指定from:body，确保能捕获到全局触发的dlstart事件

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