引言
今天就讲一下，原生的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早就默认取消这种行为了，毕竟算是早期设计缺陷了)
js
e.preventDefault()就这样，我们的form表单就不会默认发起请求了，同时也能获取到key-value表单数据，根据参数判断是否校验通过，使用异步请求组件发起我们的请求就可以了
最后
今天又进一步扩展加深一下我们的一些前端知识库了，也许以后再关键的节点能派上用场，当然ai的出现我们可能干不到那时候，学到点东西总归是快乐的对吧😄