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

愚小二

已于 2023-09-13 23:53:57 修改

阅读量1.4k

点赞数 2

文章标签：前端框架 layui ajax

于 2023-09-13 23:12:45 首次发布

本文链接：https://blog.csdn.net/qq_33808756/article/details/132866564

版权

layui 的 form.js 中添加 u.prototype.getData，用于获取 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*&/, '');
    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) && !item.checked) return;
    field[item.name] = item.value;
  });
  /*检查重复字段*/
  $.each(field, function (index, key) {
    if (e.find("input[name='" + index + "']").size() > 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'>
  <input type="text" name="name" />
</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>