作为前端数据交互的始祖，HTML原生的表单标签<form/>已经随着Ajax式的交互（如jQuery-Ajax/Axios），慢慢淡出我们的视线。包括很多大厂的产品，都会选择抛弃原生<form/>用Ajax完全替代。🙁（包括直接抛弃form标签用div来替代，和form提交拦截之后发起Ajax）
但<form/>自带的很多特性，和长久以来给我们养成的使用习惯，如果完全用Ajax式替换，需要我们额外付出一些开发工作，比如回车提交、配置提交方式、配置提交路径等。😕
所有我在想，是不是可以以原生<form/>为基础，用Ajax去给它赋予更多能力。😀
🎭适用场景
本文的讨论围绕以下两种不同的适用场景展开：
- 🖥经典服务端渲染（Server-Side-Render）开发模式
- 🎏现代前后端分离（Separation-Frontend-from-Backend ）开发模式
- 包含单页面应用（Single-Page-Application）
🖥Ajax为SSR开发赋能
自互联网web开发诞生以来，我们长期被服务端渲染的开发模式支配，我们也总能在不经意间发现SSR模式留下的痕迹。
可能是限于公司Leader的技术眼光、公司的技术能力，不足以支撑或者说不敢去进行大规模的架构改造；
当然也可能当前架构已经足以稳定支撑当前的业务需求，并且技术迭代很慢。这种情况下为使用新型架构而去改造，反而造成了额外的工作量和压力，不免有画蛇添足之嫌。
在这种老式的开发模式下，我们习惯使用原生<form/>进行表单提交：使用简单、不需要额外的学习成本、更符合H5的语义化。
但一味守旧在什么时代都不能长久。唯有去适应变化的时代，才能尽量长久地屹立不败之巅。
下面我们从是否使用异步提交来分别聊聊。
公共思路
JS拦截表单提交，然后执行自己想要的操作。
两种方式：
- 完全禁用并替换form提交的事件（拦截后无法再次启用）
$("form").submit(function(e){
e.preventDefault();
});- 暂时拦截form提交时间，并在之后继续提交
$("form").submit(function(e){
// TODO do something what you wanna do
// then continue to submit
return true;
});同步方式
如果在保持同步方式提交的前提下，我们可以通过原生JS/jQuery监听表单的提交事件，进行拦截，来进行其他操作。
- 拦截后不提交（使用上面公共思路中的第一种）
- 拦截后继续使用同步方式提交（使用上面公共思路中的第二种）
异步方式
这种方式的优势，是只利用浏览器给<form/>表单赋予的能力，在提交时间触发之后，由Ajax接管数据修改、和真正的提交。
即：拦截后使用Ajax提交（依然使用上面公共思路中的第一种）
$("form").submit(function(e){
e.preventDefault();
// 获取表单数据
const formData = $(this).serializeArray();
// 发起请求
$.ajax({
data:formData,
// 其他参数和回调
});
});🎏原生<form/>为SFB/SPA减轻工作量
(to be continued……)