引言
今天就讲一下,原生的form发起表单干了啥,虽然是一个非常简单的问题,但是过程还是有很多细节的,比如我第一反应回答到重点(虽然以前也没刻意关注),反应太简洁了,重要的点容易被忽略掉了
故事的起因是这样的:
今天公司的一个前端老司机突然问了一个开发,原生form发起表单干了啥,可能那个使用表单提交内容的时候,忽略了什么,出现了问题,所以抛出了这么一个问题(有些项目是jquery编写的,要是忽略一些东西会有点问题),那个开发(我朋友),直接回答了不知道呀,我预感到他可能会问我,我就简单回想了一下
我的第一反应是:根据表单name生成提交的对象数据,然后发起请求,就完事了也没啥吧!
然后朋友直接说我这么说的,老司机似乎也没听到他想要的,一阵感慨(估计心想,项目组都是些什么人呀,这都不会知道),而我也比较疑惑,应该是对的呀,虽然自己以前没直接开发过原生或者jquery开发过
后面老司机说,要刷新页面呀,我一下子就明白是怎么回事了,原来要的是这个细节,那老项目发起表单,基本上都是走ajax请求,是取消form的默认行为再发起请求的,如果忽略了,那么页面就是要重新刷新的,怪不得出现了问题
form发起表单
综合上面情况,我们分析一下原生form发起表单的时候干了啥、为啥:
- 实际上就跟我第一反应一样,默认行为就是根据表单name获取需要提交的数据,然后发起请求,可以配置请求
- 只不过,过去发起请求默认可是没有ajax和axios一样的异步请求库的,毕竟form出场设计的比这些东西还要早不少,因此有自己的行为,所以能看到它提供了action跳转地址和请求参数等
- 因此,默认请求会使用浏览器的跳转/刷新,原生form只能通过跳转或刷新发起请求,可以理解为直接把新的请求接口地址当做一个新的html地址跳转请求了,因此,如果后端没有返回xml相关内容,或者重定向到某一个html路径的话,则会显示后端返回的json数据
- 所以能显而易见的知道了,因为要请求接口,所以当前页面刷新了,刷新/跳转为接口地址了,就是如此简单
- 设置了action,但没有阻止默认事件,会走默认行为,浏览器直接不关心回调做了啥,甚至会中断js执行,直接刷新跳转指定action的url
- 当然如果不填写action的话,会把当前页面路由当做接口跳转发起请求,从而触发了页面刷新假象(实际也是刷新哈,只不过可能会多了一些没用的表单参数)
该怎么做
通过上面我们知道了提交表单的默认行为,不管是使用原生的form提交,还是使用antd,都是要使用现在的异步请求组件,ajax、fetch、axios等
不管使用哪一个,都需要控制form表单走浏览器的默认行为,那么怎么控制呢,只需要使用经常用click事件一样的阻止默认行为就行了(antd早就默认取消这种行为了,毕竟算是早期设计缺陷了)
e.preventDefault()
就这样,我们的form表单就不会默认发起请求了,同时也能获取到key-value表单数据,根据参数判断是否校验通过,使用异步请求组件发起我们的请求就可以了
最后
今天又进一步扩展加深一下我们的一些前端知识库了,也许以后再关键的节点能派上用场,当然ai的出现我们可能干不到那时候,学到点东西总归是快乐的对吧😄