【前端框架】 layui form 表单提交获取数据、解决ajax提交数组问题

layui 的 form.js 中添加 u.prototype.getDa t a，用于 获取 form 表单的数据

代码如下

u.prototype.getData = function (e) {
  e = $('.layui-form[lay-filter="' + e + '"]').eq(0);
  const nameIndex = {} /*数组 name 索引*/
    , field = {}
    , fieldElem = e.find('input,select,textarea'); /*获取所有表单域*/
  layui.each(fieldElem, function (_, item) {
    item.name = (item.name || '').replace(/^s*|s*&amp;/, '');
    if (!item.name) return;
    
    /*用于支持数组 name*/
    if (/^.*[]$/.test(item.name)) {
      var key = item.name.match(/^(.*)[]$/g)[0];
      nameIndex[key] = nameIndex[key] | 0;
      item.name = item.name.replace(/^(.*)[]$/, '$1[' + (nameIndex[key]++) + ']');
    }
    if (/^checkbox|radio$/.test(item.type) &amp;&amp; !item.checked) return;
    field[item.name] = item.value;
  });
  /*检查重复字段*/
  $.each(field, function (index, key) {
    if (e.find("input[name='" + index + "']").size() &gt; 1) {
      /*删除原有字段属性*/
      delete field[index];
      let newArrary = Array();
      /*更新数组长度*/
      for (v = 0; v < $("input[name='" + index + "']").size(); v++) newArrary.push($("input[name='" + index + "']:eq(" + v + ")").val());
      /*增加属性*/
      field[index] = newArrary;
    }
  });
  return field;
}

调用方式

<form id="addForm" class="layui-form" lay-filter='addForm'&gt;
  <input type="text" name="name" /&gt;
</form>

<script type="text/javascript">
  layui.use(['form','jquery'], function () {
    var $ = layui.jquery;
    var form = layui.form;

    // 获取 form 表单数据
    const formValue = form.getData("addForm");
    $.ajax({
      url: url,
      type: "post",
      // 解决数组问题
      traditional: true,
      dataType: "json",
      data : formValue,
    });
  });
</script>