如何使用 HTMX 和 Django 将参数传递给视图?

Ral*_*sel 3 django htmx

我正在尝试使用django-htmx与 Django 和htmx实现类似按钮,但我不知道如何将其作为参数传递给我的视图以保存相关项目。id

# models.py
class Item(models.Model):
    name = models.CharField()
    like = models.BooleanField(null=True, default=None)
Run Code Online (Sandbox Code Playgroud)

(简化)表显示如下项目:

id  name    like
--  -----   ----
 1  Alpha   None
 2  Beta    None
Run Code Online (Sandbox Code Playgroud)

这个想法是通过点击第一个“None”,Django应该将数据库中第一个项目的相似值更改为“True”,这应该反映在表中:

id  name    like
--  -----   ----
 1  Alpha   True
 2  Beta    None
Run Code Online (Sandbox Code Playgroud)

该表是由如下模板生成的:

<table>
{% for item in page_obj %}
    <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td id="like-{{ item.id }}"
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-post="{% url 'save-like' %}?id={{ item.id }}"
            hx-target="#like-{{ item.id }}" 
            hx-swap="outerHTML">
            {{ item.like }}
        </td>
    </tr>
{% endfor %}
</table>
Run Code Online (Sandbox Code Playgroud)

单击“无”后,将请求以下功能:

#views.py
def save_like(request):
    success = False
    if request.method == 'POST':
        item = Item.objects.filter(pk=request.POST['id']).first()
        item.like == True
        item.save()
        success = True
    if success:
        return HttpResponse('<td>True</td>>')
    else:
        return HttpResponse("Error")
Run Code Online (Sandbox Code Playgroud)

我的问题:request.POST是空的,我不知道如何将 传递id给函数。(我不明白这个参数如何与 htmx 一起使用: https: //htmx.org/docs/#parameters

有人给我提示吗?

Anu*_*gmi 6

您已在 url 查询参数中发送您的 ID,而不是?id=1在请求正文中发送。查询参数可以从request.GET

item_id = request.GET.get('id')
Run Code Online (Sandbox Code Playgroud)

如果您想在请求正文中发送 id,请添加一个隐藏的输入字段,然后添加hx-include="[name='id']"以包含该字段

<td id="like-{{ item.id }}"
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-post="{% url 'save-like' %}"
            hx-target="#like-{{ item.id }}" 
            hx-include="[name='id']"
            hx-swap="outerHTML">

  <input type="hidden" value="{{item.id}}" name="id">
  {{ item.like }}
</td>

Run Code Online (Sandbox Code Playgroud)

然后您可以从request.POST['id']