无JS场景下如何不通过URL参数在两独立视图间传递表单数据
该需求完全可以实现,不需要编写任何JavaScript代码,也不需要通过URL参数携带数据。
POST表单直传方案
这是最通用、兼容性最好的原生实现方式,不需要额外服务端存储逻辑。你只需要把第一个视图里的表单method属性设置为POST,action属性直接填写第二个视图的路由地址即可。用户提交表单时,浏览器会自动将所有表单字段封装到POST请求的请求体中发送给第二个视图,数据全程不会暴露在URL里,也不需要任何JS逻辑参与。
第一个视图的表单示例代码如下:<form method="POST" action="/second-view-path"> <label>用户名:<input type="text" name="username"></label> <label>联系邮箱:<input type="email" name="email"></label> <button type="submit">进入下一个视图</button> </form>第二个视图只需要从POST请求体中解析对应表单字段,就能拿到第一个视图提交的全部数据。
服务端Session中转方案
如果两个视图之间需要经过跳转、不想让用户直接通过POST请求访问第二个视图,可以用这个方案:第一个视图接收到POST提交的表单数据后,先把数据存入当前访问用户对应的服务端Session中,再返回302重定向响应让浏览器跳转到第二个视图,第二个视图直接从当前用户的Session里读取之前存入的表单数据即可。
这个方案跳转后第二个视图的URL完全干净,没有任何多余参数,全程不需要前端JS参与。唯一的前提是站点正常启用Session机制(主流后端框架都有默认实现,一般通过Cookie识别用户身份,只要用户未禁用Cookie就能正常运行)。307重定向传参方案
如果不想额外占用Session存储,也可以在第一个视图收到表单POST请求后,返回307临时重定向响应,将重定向地址指向第二个视图。支持标准HTTP规范的浏览器会自动将原POST请求的请求体原样发送给第二个视图,第二个视图直接解析POST请求体就能拿到数据,全程URL不会携带参数,也不需要JS。注意这个方案对极个别非常老旧的浏览器存在兼容性问题,优先选前两种方案更稳妥。
注意:所有方案都不要用GET方法提交表单,GET方法提交的表单数据会被浏览器自动拼接在URL参数里,不符合需求要求。
内容的提问来源于stack exchange,提问作者Blackwidow 115

