ajax异步请求刷新Layui表格数据

今天遇到一个小问题，向后端传一个bean插入到数据库后，在前端页面同步显示。刚开始直接用from表单把数据传给后台进行插入操作，但是这样前端不能及时接收到后端完成插入操作的信息（其实是我不知道怎么后端操作完成，前端同步刷新，不知道怎么传值）。

解决方案：

使用ajax异步请求，不使用from向后端传值。

可以通过设置ajax的success属性，设置当请求成功后回调的函数，在该函数中刷新layui表格。

代码如下：

ajax相关代码：

$.ajax({url: '${pageContext.request.contextPath}/admin/addBook',data: {"bIsbn": arg.field.bIsbn,"bName": arg.field.bName,"bAuthor": arg.field.bAuthor,"bTotal": arg.field.bTotal,"bDescribe": arg.field.bDescribe},type: 'POST',success: function (result) {console.log(result);if (result == null) {layer.msg("更新失败！");// console.log("更新失败")} else {// console.log("更新成功")/* layer.msg("更新成功！"); *///当你在iframe页面关闭自身时var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.refreshTable();//调用父页面中刷新表格的函数//layer信息提示layer.msg('更新成功');//下面是关键代码setTimeout(function () {parent.layer.close(index)}, 330);//延迟}}
});

刷新表格代码：

//刷新表格
window.refreshTable = function(){// var recodePage = $(".layui-laypage-skip .layui-input").val();// console.log(recodePage);table.reload('bookList', {url: '${pageContext.request.contextPath}/admin/listBookByLimit'});}

效果演示：

总结：

在这个例子中，点击主页面的按钮会弹出来一个对话框，该对话框里呢是通过 iframe 标签引入的一个页面，就相当于在这个子 iframe中点击添加按钮，如果添加成功，则在前端页面刷新数据。这里除了ajax之外，还有一个知识点是：在子iframe中调用父iframe中的方法只需要 parent.function();即可。然后就是在layui.use(…)之外调用它里面定义的函数，直接调用是调用不出来的。例如：

解决办法如下：

参考文章：

Layui 外部调用use内定义的函数

狂神说SpringMVC07：Ajax研究

ajax异步请求刷新layui表格相关推荐

ajax异步请求刷新
在网站刷新的方法中,ajax刷新是一种用户体验良好的刷新方式,在结合ssh等流行的框架!最为常用了!下面就是常用一个ajax刷新表单的一个demo, $(document).ready(functio ...
Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法一.效果图:(以每一个月的工业产值为例) 我们 ...
a标签不跳转+ajax异步请求+局部刷新页面
a标签不跳转 <td style="text-align:center;"><a href="" style="color: #2d ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...
python django异步访问_初试Ajax异步请求（基于Django框架）
概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...
ajax异步请求实例
1. 问题分析用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...
Ajax异步请求原理和过程
Ajax异步请求原理和过程 1.什么是Ajax 2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 ) 3.操作XMLHttpRequest 对象 1.什么是Ajax Ajax是一种 ...
layui-tree实现Ajax异步请求后动态添加html元素
最近在弄一个产品分类管理,是一个树形菜单的形式,用的是layui-tree ,由于它并没有动态添加节点,所以只能自己刚了. 大概效果如左图具体的实现是当我鼠标移入"长袖"这个分类 ...

ajax异步请求刷新layui表格