layui-form 表单提交获取数据教程

2023-07-17 21:03:47

使用 LayUI 轻松高效地提交表单数据

在构建交互式、响应式的前端界面时，表单扮演着至关重要的角色。LayUI 表单是一个功能强大的框架，它让创建和处理表单变得轻而易举。本文将深入探究如何使用 LayUI 提交表单数据，并解决 AJAX 提交数组数据时遇到的常见问题。

提交数据

LayUI 表单提供了一种简单的方法来提交数据。只需要给表单元素添加一个 name 属性，并为其指定一个值即可。例如：

<form class="layui-form" action="submit.php" method="post">
  <input type="text" name="name" lay-verify="required" placeholder="请输入姓名">
  <input type="password" name="password" lay-verify="required" placeholder="请输入密码">
  <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
</form>

在上述代码中，name 属性为表单元素指定了名称，lay-verify 属性指定了验证规则，placeholder 属性指定了提示信息。

当用户点击提交按钮时，LayUI 表单将自动将表单中的数据序列化并发送到指定的操作页面。您可以在操作页面中获取这些数据并进行相应的处理。

解决 AJAX 提交数组问题

在使用 LayUI 表单通过 AJAX 提交数据时，可能会遇到一个常见问题：无法提交数组数据。这是因为 LayUI 表单在序列化表单数据时，会将数组数据转换为字符串。

为了解决这个问题，可以使用 LayUI 表单提供的 toJSON 方法将表单数据转换为 JSON 对象，然后使用 $.ajax() 方法提交 JSON 对象。例如：

layui.use(['form', 'jquery'], function(){
  var form = layui.form,
      $ = layui.jquery;

  //监听提交
  form.on('submit(formDemo)', function(data){
    //将表单数据转换为JSON对象
    var data = form.val("formDemo", true);

    //提交数据
    $.ajax({
      url: 'submit.php',
      type: 'post',
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function(res){
        console.log(res);
      }
    });

    return false; //阻止表单跳转
  });
});