ajax异步请求刷新layui表格

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(…)之外调用它里面定义的函数，直接调用是调用不出来的。例如：

在这里插入图片描述