layui搭配使用ajax提交表单、提交成功后刷新数据表格展示|笔记小记

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。小编也是在开发过程中比较喜欢用、但是也遇到了不少坑点、现在来做一个记录！

下面就来介绍一下常用的一些操作

首先创建一个form表单 代码如下：

<div id="layer">
    <form class="layui-form" target="fraSubmit"  id="formdata">
    <div class="layui-form-item" style="margin-top: 10px;">
        <label class="layui-form-label">修改用户</label>
    <div class="layui-input-inline">
        <input type="text" name="username"
        class="layui-input"  value="" readonly="readonly"/>
    </div>
    </div>
    <div class="layui-form-item" style="margin-top: 10px;">
        <label class="layui-form-label">原密码</label>
    <div class="layui-input-inline">
        <input type="text" name="old" id="old" lay-verify="required" 
        placeholder="请输入原密码" autocomplete="off" class="layui-input" />
        </div>
    <div class="layui-form-mid layui-word-aux">请输入此用户原密码</div>
        </div>
    <div class="layui-form-item" style="margin-top: 10px;">
        <label class="layui-form-label">修改密码</label>
    <div class="layui-input-inline">
        <input type="password" name="new" id="new" lay-verify="required"
        placeholder="请输入新密码" autocomplete="off" class="layui-input" />
    </div>
    <div class="layui-form-mid layui-word-aux">8-16位密码，区分大小写</div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" id="edit" type="button">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">
        重置</button>
    </div>
    </div>
    </form>
    <iframe name="fraSubmit" style="display:none;"></iframe>
    </div>

这里的<iframe>标签只是用于表单上传后不自动跳转刷新

//导入layui的js并且新建js调用声明
layui.use(['layer', 'table', 'element', 'laypage', 'form'], function() {
    var layer = layui.layer,
    table = layui.table,
    element = layui.element,
    laypage = layui.laypage,
    form = layui.form;
    //这里面写一些需要的效果
});//只声明几个要用的参数

写一个表单点击提交动作

$('#edit').click(function(){//点击立即提交事件
    $.ajax({
    type:"POST",//使用POST提交
    url:"www.zfjsec.com",//form表单上传的地址
    data:$('#formdata').serialize()//这个ID是form表单的ID、
    //serialize用于提交这个ID表单内所有内容
    success:function(data,textStatus,xhr){
    if(xhr.status == 200){
       layer.msg('上传成功',{
       icon:1,//状态图标
       Time:4000//展示时间为4s
       })；//这里用于检测上传状态是否成功
       parent.layui.table.reload('demo');//刷新数据表格
       setTimeout(function(){
       $('.layui-layer-close').click();
       },1000)
    }
    }，
    error:function(){
       layer:msg('上传失败'，{
       icon:2//代表错误的图标
       Time:4000//展示时间4s
    });
    parent.layui.table.reload('demo');
      setTimeout(function(){
      $('.layui-layer-close').click();
      },1000)    
    }
    })
});

这样在使用ajax的时候就可以达到刷新数据表格的效果了！由于这个笔记当初忘记贴图了！所以无效果图！