我有一个登录表单,标记如下:

<div id="login_form" hx-ext="response-targets">
    <form action="/login" method="POST" hx-boost="true" hx-target="#login_form" hx-target-400="#login_form" hx-swap="innerHTML">
        ...
        <button type="submit">Log in</button>
    </form>
</div>

当出现错误时,Backend返回带有概述错误的表单,状态代码为400(因此扩展为response-targets).在成功,后端响应HX-Location标题的用户的个人资料页面,我希望用户被重定向.简单地说:

  1. 出错时应重新呈现表单(400个错误请求)
  2. 用户应在成功(200 OK)后被重定向至其个人资料页面

实际发生的情况是,HTMX以#login_form为单位呈现整个用户的个人资料页面,而不是重定向,就好像hx-target覆盖或优先于HX-Location标头.

试着在没有response-target插件的情况下,它的工作原理是一样的.对于response-target插件,我不能省略hx-target,因为hx-target-400不能被识别或处理.

我如何将它们组合在一起,以便在出错时重新呈现表单,或在成功时重定向到页面?

推荐答案

LocationHX-Location标题都存在时,hx-target填充了我想要重定向到的整个页面的行为.

修复很简单-如果后端检测到请求来自HTMX(通过判断HX-Request请求头是否存在),它将以HX-Location重定向响应,如果不存在,它将以Location头响应.

我发送这两个标题的原因是因为我从渐进式增强的 idea 开始.我的假设是HTMX(v1.9.6)在找到它时将使用HX-Location,剩下Location作为不是来自HTMX的请求的后备(或者禁用了Java).

Html相关问答推荐

值更新时旋转数字动画

CSS/添加margin—top到嵌入式facebook帖子

将输入字段下方的两个按钮设置为两侧对齐

背景可点击,而不是文本

根据屏幕大小拆分长行列表

如何在垂直堆叠的表格中调整人造列的大小?

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

从网页中提取URL

CSS中的转换属性是如何工作的?

如何创建嵌套的动态表单元素

如何防止滑动滚动元素时touch 屏出现空白区域?

当div位于flexbox中时,如何使div的宽度与高度相同

为什么我的 div 元素没有形成一个圆形时钟?

标签背景 colored颜色 的 html 和 css 技巧说明

将 div 放在图片旁边而不是下方

让 Iframe 覆盖整个页面

如何在react 中向按钮添加禁用属性?

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

Angular Material Hide Password 在输入时切换

如何将内容从侧边栏的底部移动到右侧?