2

因此，当使用 HTMX 将表单提交到我的 Django 后端时，我试图显示一条反馈消息，说“已添加”或“失败”。

基本上我现在拥有的是一个执行 hx-post 的表单，回复是一个div包含更新信息的表单，它与div.

<div id="list">
    <!-- The stuff in here is loaded through another template, which is
         the result of a successful myApp:add operation. -->
</div>
<form hx-post="{% url 'myApp:add' eid=e.id %}" hx-swap="outerHTML" hx-target="#list">
    <!-- Some stuff in here -->
</form>
<div id="result">
    <!-- Here I should print a message saying correct or incorrect
         depending on the HTMX result (if the entry was added or there was
         any kind of error, even connection errors) -->
</div>

问题是，如果表单或请求本身出现错误，列表将保持不变，但我希望它在resultdiv 中打印类似“错误”的内容。如果正确添加了新条目，我想在结果 div 中打印“成功”消息。

请注意，我不能将结果 div 作为 hx-post 响应 DOM 的一部分返回，因为连接可能会失败。所以不会显示失败消息。

如果有帮助的话，我也在使用 Alpine.js。

4

1 回答 1

2

如果您可以在现有代码周围添加 div，这是使用 Alpine 执行此操作的一种方法：

<div x-data="{ state: '' }" 
    @htmx:send-error="state = 'send error'" 
    @htmx:response-error="state = 'response error'" 
    @htmx:after-swap="state = 'success'"
>
    <div id="list"></div>

    <form hx-post="{% url 'myApp:add' eid=e.id %}" hx-swap="outerHTML" hx-target="#list">
        <button type="submit">Submit</button>
    </form>

    <div id="result">
        <span x-text="state"></span>
    </div>
</div>

事件在目标上触发，#list因此它们冒泡到父 div。如果您更喜欢将 Alpine 组件添加到#resultdiv 中，您可以通过侦听窗口上的事件来实现：

<div id="result" x-data="{ state: '' }" 
    @htmx:send-error.window="state = 'send error'" 
    @htmx:response-error.window="state = 'response error'" 
    @htmx:after-swap.window="state = 'success'">
    <span x-text="state"></span>
</div>

如果您使用第二种方法并且在同一页面上发生了多个 htmx 请求，您还可以读取$event.detail.target.idAlpine 事件中的值以添加一些逻辑。在上述情况下，该值应为list。

要处理来自服务器的特定响应代码，您可以检查$event.detail.xhr.status事件中的值。例如：

<div id="result" x-data="{ state: '' }" 
    @htmx:send-error.window="state = 'send error'" 
    @htmx:response-error.window="state = $event.detail.xhr.status == 400 ? 'validation error' : 'response error'" 
    @htmx:after-swap.window="state = 'success'">
    <span x-text="state"></span>
</div>
于 2022-01-07T11:15:17.990 回答