《layui表单提交;layui表单提交模板》

在使用Layui框架进行开发时，表单提交是常见的操作。其解决方案主要是利用Layui提供的form模块和ajax请求相结合的方式，将表单数据发送到服务器端。

一、基本的表单提交方式

确保引入了Layui的css和js文件。然后编写一个简单的HTML表单：

html</p>


    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>


<p>

接着使用JavaScript代码来处理表单提交：

javascript
layui.use('form', function(){
  var form = layui.form;</p>

<p>//监听提交
  form.on('submit(formDemo)', function(data){
    //data.field就是当前容器的全部表单字段，名值对形式：{name: value}
    console.log(data.field);</p>

<pre><code>//可以使用ajax提交数据到后台
$.ajax({
  url:'/yourUrl',//替换为你的后台接口地址
  data:data.field,
  type:'post',
  success:function(res){
    if(res.code == 0){
      //提交成功后的操作
      layer.msg('提交成功');
    }else{
      layer.msg('提交失败');
    }
  },
  error:function(){
    layer.msg('请求出错');
  }
});
return false;//阻止表单跳转

});
});

二、使用lay - submit自定义按钮提交

如果不想使用默认的带有lay - submit属性的按钮触发提交，也可以通过其他按钮或者事件来触发。例如：

html <button id="customSubmit" class="layui-btn">自定义提交</button>

对应的JavaScript代码：

javascript
$('#customSubmit').on('click',function(){
  //先获取表单数据
  var formData = $('#testForm').serializeArray();
  var json = {};
  $.each(formData, function(i, v) {
      json[v.name] = v.value;
  });</p>

<p>//然后发起ajax请求
  $.ajax({
    url:'/yourUrl',
    data:json,
    type:'post',
    success:function(res){
      if(res.code == 0){
        layer.msg('提交成功');
      }else{
        layer.msg('提交失败');
      }
    },
    error:function(){
      layer.msg('请求出错');
    }
  });
});

以上两种思路都能实现Layui表单的提交，在实际项目中可以根据需求选择合适的方式。