按道理来说, 明明已经点击了提交这个操作, 然而页面却根本不存在任何反应——这样的情况, 是网站运营期间极为平常, 却又是最容易令人感到抓狂的一类场景。

它常常地不见得是服务器出现故障停止运行了, 不过是前端部分进行查验和验证以及后端阶段施行接收期间的那种“信号出现中断”的情况。身为从事相关技术运作的网站负责人, 与其去翻阅日志文件, 倒不如先依照顺序完整运行完这一整套用于检查和排查的流水流程线:

第一步：检查控制台（F12 → Console）

绝大部分呈现无响应情形, 乃是源于JavaScript报错所促使引发的中断状况, 常见的报错囊括有:

参考, MDN网页文档明确作出说明, 表单submit事件要是被unload事件取消掉, 或者表单元素在提交之际已经被移除了DOM树, 那么浏览器将会静默之中止提交。

第二步：检查是否阻止了默认行为

存在着诸多开发者, 于submit事件这般特定设定环节当中书写着e.preventDefault()这一代码内容来开展AJAX提交操作过程, 然而却遗忘了一个关键事宜, 即在AJAX取得成功回应回调函数这一特定场景里, 要于其间进行手动提交工作或者重新实行指向其他路径的转跳动作。与之相关的代码示意呈现如下:

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止了原生提交
    fetch('/api/submit', { method: 'POST', body: new FormData(this) })
        .then(res => res.json())
        .then(data => {
            // 这里必须写：window.location.href = '/success' 或者 this.submit()
            console.log(data);
        });
});

如果没有手动提交或跳转，用户就会感觉“点了没反应”。

第三步：检查name属性与required字段

在表单提交之际, 浏览器会将input标签当中, 若不存在name属性的那个字段予以忽略, 哪怕该字段里面是存有value的。

此外, 要是 HTML5 的 required 属性跟 type="hidden" 一同使用, 某些浏览器会引发“无效表单”拦截, 然而却不会展现任何提示。

按照W3C HTML5标准来说, 表单控件只有在设置了name的情况下, 才能够构成成功控件, 也就是successful control。

第四步：服务端是否返回非JSON格式内容

倘若你借助AJAX去提交, 而服务端返回了HTML源码或者302重定向, 那么当前端解析res.json()的时候, 便会直接进入catch分支, 届时用户界面不会有反馈。

做出这样的提议: 将服务端给予返回结构体时统一采用的形式设定为Content-Type: application/json , 具体呈现方式为如下这般。

{"code":0, "msg":"提交成功"}

在前端的catch里面, 同样是需要去写alert('服务器异常')的, 以此来防止出现静默失败这种情况。

总结得出: 表单呈现出无响应这种状况, 追根溯源很大程度上是, 前端事件捆绑链接出现丢失, 以及后端返回数据格式不相匹配, 这两种情况组合而成的问题。给予的建议为: 在投入正式生产的环境里, 针对关键的提交事件, 增添try...catch保护机制, 并且在控制台之处进行一目了然的日志输出, 而并非单纯依靠肉眼来进行查看。

否玩代码编辑 https://www.fouwan.com