layui获取子页面表单数据

如果你正在使用 layui 框架，可以在子页面中使用 layui.form 模块来获取表单数据。

1. 在子页面中引入 layui.form 模块：

layui.use('form', function(){
  var form = layui.form;
  // 你的代码
});

2. 在子页面中给表单元素添加 name 属性，方便获取表单数据：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

3. 在父页面中监听子页面的提交事件，使用 layui.layer.open 方法打开子页面：

layui.use('layer', function(){
  var layer = layui.layer;
  
  // 监听提交事件
  layui.form.on('submit(formDemo)', function(data){
    // 获取表单数据
    var username = data.field.username;
    var password = data.field.password;
    // 异步提交表单数据
    $.post('/submit', {username: username, password: password}, function(res){
      if(res.code === 0){
        // 提交成功，关闭子页面
        layer.closeAll('iframe');
      }else{
        // 提交失败，提示用户
        layer.msg(res.msg);
      }
    });
    return false;
  });

  // 打开子页面
  layer.open({
    type: 2,
    title: '子页面标题',
    area: ['600px', '400px'],
    content: '/subpage.html' // 子页面 URL 地址
  });
});

在这个例子中，我们使用 layui.form.on 方法来监听子页面的提交事件，获取表单数据并提交到服务器。如果提交成功，我们使用 layui.layer.closeAll 方法关闭子页面；否则，使用 layui.layer.msg 方法提示用户提交失败的原因。