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的时候就可以达到刷新数据表格的效果了!由于这个笔记当初忘记贴图了!所以无效果图!
原创文章,作者:纸飞机,如若转载,请注明出处:https://www.zfjsec.com/292.html
-- 展开阅读全文 --