htmx: hx-target: swap html vs 整页重新加载

Question

我有一个包含多个表单的页面。

如果用户提交表单，则只应提交当前表单（而不是页面的其他表单）。

在服务器上验证表单。

情况 1：如果验证失败，则服务器将 html 发送到客户端，并且应交换特定表单并将新表单添加到 DOM。这个新表单包含一条错误消息。用户现在可以修正错误并再次提交表单。

案例二：表单验证成功，数据已保存。现在我想在客户端触发全页重定向。

我阅读了 htmx 的文档 hx-target。我设法使案例 1 正常工作（我喜欢 htmx 的这个功能）。

但是服务器如何触发整页重定向呢？

Answer 1

我发现了这个：

您可以使用 HX-Redirect http 响应 header 在客户端触发重定向。

我为基于 Django 的应用程序创建了这个 class。这样一个片段可以触发整个页面的重新加载：


class HTTPResponseHXRedirect(HttpResponseRedirect):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self['HX-Redirect']=self['Location']
    status_code = 200

Answer 2

@Tomk，这是一个示例，可以让您很好地了解如何使用@guettli 的解决方案。这是管理事件的项目中经过编辑的片段。

views.py

from django.contrib.auth.decorators import login_required
from django.http import HttpResponseRedirect
from django.contrib import messages
from django.shortcuts import get_object_or_404
from .models import Event

class HTTPResponseHXRedirect(HttpResponseRedirect):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self["HX-Redirect"] = self["Location"]

    status_code = 200

@login_required
def delete_event(request, event_id: int):

    event = get_object_or_404(Event, pk=event_id)

    if request.method == "DELETE":
        event.delete()
        messages.add_message(request, messages.SUCCESS, "Successfully deleted event!")

    return HTTPResponseHXRedirect(redirect_to=reverse_lazy("events"))

urls.py

from django.urls import reverse_lazy

urlpatterns = [
    path("events", views.list_events, name="events"),
    path(
        "events/delete/<int:event_id>", views.delete_event, name="delete_event"
    )
]

edit_event.html

...
<span hx-delete="{% url 'delete_event' event.id %}" 
      hx-confirm="Are you sure you want to delete this event?" 
      hx-swap="none" 
      class="btn btn-danger fa fa-trash">
</span>
...

使用这种方法将允许您使用 htmx，但也可以让 django 重定向前端。如果你在没有 htmx 的情况下这样做，你通常会使用 django redirect 函数。

htmx: hx-target: swap html vs 整页重新加载

htmx: hx-target: swap html vs full page reload

htmx