2

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

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

在服务器上，表单得到验证。

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

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

我阅读了 htmx hx-target的文档。我设法让 case-1 工作（我喜欢 htmx 的这个功能）。

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

4

2 回答 2

9

我找到了这个：

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

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


class HTTPResponseHXRedirect(HttpResponseRedirect):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self['HX-Redirect']=self['Location']
    status_code = 200
于 2021-01-04T20:59:08.433 回答
5

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

视图.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"))

网址.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"
    )
]

编辑事件.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 的情况下执行此操作，您通常会使用 djangoredirect函数。

于 2021-10-26T01:53:19.627 回答