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研究