layui 表单提交为什么有两次

1. 什么是 layui?

layui 是一个基于 layui 的前端 UI 框架，注重极简、易用、标准三个特点。最主要的特征就是轻量级，尤其适合前后端分离的项目。该框架灵活，且易于扩展和维护。

本文将会讲解一个比较常见的问题 —— 表单提交为什么会有两次，接下来将深入探讨这个问题。

2. layui 中表单提交的原理是什么？

Layui 在表单提交中使用了原生的 Ajax 技术，先阻止了表单默认的提交操作，通过监听表单的 submit 事件，将表单数据进行加工后以 JSON 的格式封装到异步请求参数中，发起异步请求访问服务端，然后在回调函数中处理返回值并进行相应的提示等操作。

2.1 layui 的表单事件监听

Layui 中监听表单提交是通过 on 函数来实现的，主要代码如下：

// 提交
form.on('submit(formDemo)', function (data) {
  console.log(data.field); // 当前容器的全部表单字段，名值对形式：{name: value}
  layer.msg(JSON.stringify(data.field)); // 序列化表单值
  return false; // 防止表单重载
});

在这个示例中，监听了一个名称为 formDemo 的表单提交事件，当表单提交时，会触发这个回调函数。其中，data.field 是提交表单时序列化的参数对象。

2.2 layui 的异步提交

这里是 layui 的异步提交代码实现：

var { form } = layui;
//提交表单
form.on('submit(formDemo)', function (data) {
  var loadingIndex = layer.load(2, { shade: [0.3, '#fff'] }); // 加载动画
  $.ajax({
    url: '/api/addOrUpdate', // 服务端 url
    type: 'POST', // 提交方式
    contentType: 'application/json; charset=utf-8', // 请求类型
    data: JSON.stringify(data.field), // 将对象转为 json 字符串，提交给服务端
    dataType: 'json', // 预期返回的数据类型
    success: function (res) { // 成功处理
      layer.msg('保存成功');
    }
     error: function (res) { // 失败处理
      layer.msg('保存失败');
    },
    complete: function () { // 完成处理
      layer.close(loadingIndex); // 关闭加载动画
    }
  });
  return false; // 阻止表单的行为
});

这段代码中，异步请求使用的是 jQuery 的 ajax 方法，请求头中指定了请求类型为 json，请求方式为 post。

3. 表单提交重复的原因

在 layui 中，表单提交会被多次提交的原因在于，在异步请求尚未响应的时候，用户再次使用提交按钮，导致异步请求加入请求队列，最终导致了表单重复提交。解决这一问题最简单的方法是防止异步请求重复提交，我们可以在代码中加入判断 —— 只有在当前异步请求完成后，才会重新生成异步请求，代码如下：

var { form } = layui;
//提交表单
var isSubmit = false; // 是否已提交
form.on('submit(formDemo)', function (data) {
  if (isSubmit) return; // 如果已经提交过，则直接结束，并防止重复提交
  isSubmit = true; // 标记当前提交已经执行
  var loadingIndex = layer.load(2, { shade: [0.3, '#fff'] }); // 开启加载动画
  $.ajax({
    url: '/api/addOrUpdate',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data.field),
    dataType: 'json',
    success: function (res) {
      layer.msg('保存成功');
    },
    error: function (res) {
      layer.msg('保存失败');
    },
    complete: function () {
      layer.close(loadingIndex); // 关闭加载动画
      isSubmit = false; // 完成当前请求
    }
  });
  return false;
});

对重复提交进行判断的变量 isSubmit 首先设置为 false，接着在正式提交时将其设置为 true，只有在异步完成后，才将其重新变为 false。

4. 总结

layui 是一个非常好用的前端框架，而表单的重复提交问题更是一个常见的问题，我们通过查看 layui 源码，找到了解决表单重复提交的原因，并提供了一个可行的解决方案。在实际项目中，我们应该避免表单重复提交产生的各种问题，提高用户体验。