单HTTP请求实现表单提交成功跳转、失败留原页的合规方案咨询
符合规范的单次请求实现方案
直接使用原生表单提交逻辑即可实现需求,全程仅需1次HTTP请求,完全符合HTTP规范且无副作用:
- 先将表单的
action属性设置为当前页路径https://example.com/order/,无需编写自定义JS提交逻辑。
校验失败场景处理
服务端返回HTTP 200状态码,响应体为注入了错误提示信息的原订单页面完整HTML。浏览器会自动在当前标签页渲染该内容,地址栏保持/order/路径,无需额外处理即可实现停留原页展示错误的需求。
校验通过场景处理
服务端返回HTTP 200状态码,响应体为/summary/页面的完整HTML内容,同时在返回的HTML的<head>标签最前部加入一行极简内联脚本:
<script>history.replaceState({}, '', '/summary/')</script>
浏览器接收到响应后会自动销毁原订单页面的全部执行上下文(包括所有定时器、事件监听器、全局变量等),渲染新的汇总页内容,同时内联脚本执行后会将地址栏路径修改为/summary/,且不会在历史记录中留下冗余的提交请求记录,用户体验和常规重定向完全一致。
方案优势
- 完全符合HTTP规范:所有响应均为标准200状态码,响应体和返回内容匹配,不存在滥用状态码的问题
- 无副作用:完全依赖浏览器原生的页面替换逻辑,旧页面的所有运行时资源会被完全清理,不会出现JS残留执行的问题
- 仅单次HTTP请求:全程只有表单提交的一次POST请求,没有额外的重定向请求,不存在冗余开销
内容的提问来源于stack exchange,提问作者Jakub Janowski
相关产品推荐
相关产品推荐

