HTMX实现表单提交后同时执行双请求的方案咨询

问题场景 #

在Django项目中使用HTMX开发登录模态表单，表单通过hx-post提交至当前路径，目标为#login-modal。提交按钮配置了hx-get请求用于刷新另一模板中的#header，但遇到以下问题：

• 给按钮添加hx-trigger="submit"时，仅执行表单的POST提交，不触发按钮的GET请求；
• 移除hx-trigger时，点击按钮仅执行GET请求，不提交表单。
  由于表单已有指定目标，无法将GET请求配置在表单上，需要实现表单提交完成后同时执行这两个请求。

解决方案 #

方法1：利用HTMX事件钩子触发第二个请求 #

通过HTMX的htmx:afterRequest事件，在表单POST请求完成后手动触发按钮的GET请求。

修改后的表单代码：

<form class="form" name="form"
      hx-post="{{request.path}}" 
      hx-trigger="submit"
      hx-headers='{"X-CSRFToken":"{{ csrf_token }}"}'
      hx-target="#login-modal"
      hx-on::afterRequest="htmx.trigger('#login-btn', 'click')"
      >
    {% csrf_token %}
    <div class="field">
        <label class="label">Email</label>
        <div class="control">
            {% render_field form.email class="input is-link" placeholder="user@example.com" name="email"%}
        {% if form.email.errors %}
            <p class="help is-danger">{{ form.email.errors|first }}</p>
        {% endif %}
        </div>
    </div>
    <div class="field">
        <label class="label">Senha</label>
        <div class="control">
            {% render_field form.password class="input is-link" placeholder="*********" name="password" %}
        {% if form.password.errors %}
            <p class="help is-danger">{{ form.password.errors|first }}</p>
        {% endif %}
        </div>
    </div>
    <div class="field">
        <div class="control">
            <button id="login-btn" class="button is-success"
                    type="submit"
                    hx-get="{% url 'refresh_navbar' %}"
                    hx-target="#header"
                    hx-trigger="click"
                    >Login</button>
        </div>
    </div>
    <a class="is-size-8 button-unstyled has-text-link
                   login-modal-tabbable"
                   hx-get="{% url 'register' %}"
                   hx-target="#modal-register"
                   hx-trigger="click once"
                   x-cloak
                   @click.stop.prevent="modalregisteropen = !modalregisteropen">
      Register new account
    </a>
</form>

核心改动：

• 给按钮添加id="login-btn"，方便定位触发；
• 表单添加hx-on::afterRequest="htmx.trigger('#login-btn', 'click')"，在POST请求完成后触发按钮的点击事件，执行GET请求；
• 按钮的hx-trigger改为click，避免和表单的submit触发冲突。

方法2：通过视图响应头触发事件 #

仅在登录成功时触发header刷新，适合需要区分登录状态的场景。

修改后的登录视图代码：

from django.http import HttpResponse
from django.shortcuts import redirect, reverse
from django.contrib.auth import authenticate, login

def user_login(request):
    if request.method == 'POST':
        form = CustomAuthenticationForm(request.POST)
        error_messages = form.error_messages
        if form.is_valid():
            email = form.cleaned_data['email']
            password = form.cleaned_data['password']
            user = authenticate(request, email=email, password=password)
            if user is not None:
                login(request, user)
                request.session['success_message'] = "Login bem-sucedido. Bem-vindo!"
                # 添加HX-Trigger响应头，触发header刷新事件
                response = redirect('/')
                response['HX-Trigger'] = '{"refreshHeader": {"url": "%s", "target": "#header"}}' % reverse('refresh_navbar')
                return response
            else:
                form.add_error(None, 'Credenciais inválidas. Verifique seu email e senha.')
        return render(request, 'registration/login.html', {'form': form, 'error_messages': error_messages})

然后在header所在模板中添加事件监听：

<div id="header" hx-trigger="refreshHeader from:body" hx-get="{% url 'refresh_navbar' %}">
    <!-- 导航栏原有内容 -->
</div>

当登录成功返回时，HTMX会监听refreshHeader事件，自动发起GET请求刷新header。

方法3：使用HTMX的OOB（Out of Band）交换 #

通过一次请求同时更新模态框和header，减少HTTP请求次数。

修改后的登录视图代码：

from django.shortcuts import render
from django.contrib.auth import authenticate, login

def user_login(request):
    if request.method == 'POST':
        form = CustomAuthenticationForm(request.POST)
        error_messages = form.error_messages
        if form.is_valid():
            email = form.cleaned_data['email']
            password = form.cleaned_data['password']
            user = authenticate(request, email=email, password=password)
            if user is not None:
                login(request, user)
                success_message = "Login bem-sucedido. Bem-vindo!"
                # 渲染登录成功的模态框内容
                login_html = render(request, 'registration/login_success.html', {
                    'success_message': success_message
                }).content.decode()
                # 渲染更新后的header内容
                header_html = render(request, 'navbar.html', {
                    'user': request.user
                }).content.decode()
                # 组合响应，添加OOB部分替换header
                response_html = f"{login_html}<div id='header' hx-swap-oob='true'>{header_html}</div>"
                return HttpResponse(response_html)
            else:
                form.add_error(None, 'Credenciais inválidas. Verifique seu email e senha.')
        return render(request, 'registration/login.html', {'form': form, 'error_messages': error_messages})

这种方式下，登录成功后返回的响应中包含两部分内容：

• 替换#login-modal的登录成功提示；
• 通过hx-swap-oob="true"直接替换#header的内容，无需额外请求。

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