不使用AJAX,处理原生表单数据后提交

作为前端数据交互的始祖,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……)

0 thoughts on “不使用AJAX,处理原生表单数据后提交

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据