layui的表单添加功能ajax请求后端数据

头部添加功能

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>

下面是html代码增加一个button（按钮）及列表完成代码

<form class="layui-form" action="" id="addForm" style="display:none" lay-filter="add" enctype="multipart/form-data">


    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="用户名" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" id="org_email" name="org_email" lay-verify="title" autocomplete="off" placeholder="邮箱" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">组织</label>
        <div class="layui-input-block">
            <input type="text" id="company" name="company" lay-verify="title" autocomplete="off" placeholder="组织" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item" id="sub">
        <button style="display:block;margin:0 auto" class="layui-btn" type="button" lay-submit lay-filter="demo2" id="addsub">提交</button>
    </div>
</form>

script段代码ajax后端传值,调用接口传入数据库

头工具栏事件

  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
        add();
      break;
    };
  });

//#设置弹窗

function add(){
		 layer_index= layer.open({
			  type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			  title: "添加", //数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			  area: ['400px', '300px'], //所打开页面大小
			  content:$("#addForm"), //内容
			  //关闭操作
			  cancel: function(){
				layer.close(layer_index);
				$("#addForm")[0].reset();
				$('#demoe1').attr('src', "");
			  }
		 });
  };

//from提交表单

layui.use(['form', 'laydate'], function(){
    form = layui.form;
    form.render();

    //表单取值
    form.on('submit(demo2)', function(data){
        console.log(JSON.stringify(data.field));
        $.ajax({
            url:'/get_mas',
            method:'POST',

            data:data.field,
            dataType:'JSON',
            success:function(res){
                if(res.code === 0){
                    console.log(res);
                    layer.msg("添加成功");
                    window.location.reload()
                }else{
                    layer.msg("添加失败");
                    $("#addForm")[0].reset();
                    form.render();
                }
            },
            error:function (res) {
                layer.msg("网络错误");
                $("#addForm")[0].reset();
                form.render();
            }
        }) ;
        layer.close(layer_index);
    });

  });