如何通过HTMX获取元素值？从表单按钮切换到SVG的问题

原本用form+button实现点赞功能，代码正常运行：

<form method="POST" action="{% url 'posts:like_post' post.pk %}">
{% csrf_token %}
{% if user.is_authenticated %}
    <button type="submit" name='post_id' value="{{ post.id }}">Like</button>
{% else %}
    <a href="{% url 'pages:login' %}"><u>Login</u> to like</a>
{% endif %}
</form>

尝试换成SVG+HTMX的方式后，无法获取post_id的值，SVG代码如下：

<svg hx-post="{% url 'posts:support_post' post.pk %}" 
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
     name='post_id' value="{{ post.id }}" 
     class="some_class" 
     xmlns=...>
</svg>

对应的Django视图中，原form方式用request.POST.get('post_id')能正常获取值，但HTMX方式用request.htmx.trigger_name只能拿到post_id这个名称，拿不到对应的值：

def LikeView(request, pk):
    # 原form方式可行：
    # post = get_object_or_404(Post, id=request.POST.get('post_id'))
    # HTMX方式无法获取值：
    # post = get_object_or_404(Post, id=request.htmx.trigger_name)

核心问题：HTMX场景下，替代request.POST.get('post_id')获取元素值的方法是什么？

方法1：用hx-vals直接传递参数 #

SVG不属于表单控件，HTMX不会自动提交它的name和value属性。可以通过hx-vals把post_id作为请求参数发送：

<svg hx-post="{% url 'posts:support_post' post.pk %}" 
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
     hx-vals='{"post_id": "{{ post.id }}"}'
     class="some_class" 
     xmlns=...>
</svg>

这时在视图里依然用request.POST.get('post_id')就能获取到值，和原form方式完全兼容。

方法2：直接用URL中的pk参数 #

注意到你的HTMX请求URL已经包含了post.pk，视图函数也接收pk参数，直接用这个参数就能获取Post对象，不需要额外传递post_id：

def LikeView(request, pk):
    post = get_object_or_404(Post, id=pk)
    # 后续点赞逻辑...

这种方式最简洁，省去了额外参数传递的步骤。

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