第11讲_layer插件无刷新显示

发布时间:2021-07-13 22:09:34    发布者:文昌文城莱奥网络技术工作室    浏览次数:853

知识点:

1、编辑页面表单主要代码:

 <form class="layui-form layui-form-pane"  action="{:url('config/index')}"  data-type="ajax">

2、控制器主要代码:

return json([
                'status' => 200,
                'msg' => '配置更新成功',
                'url' => url('index', ['tab' => $data['tab']]),
            ]);

3、layer_hplus.js代码:

//异步提交
$(document).on("submit", "form[data-type=ajax]", function () {
  var url = $(this).attr("action");
  //console.log(url);
  //序列化表单数据
  var data = $(this).serializeArray();

  $.ajax({
    type: "POST",
    dataType: "json",
    url: url,
    data: data,
    success: function (res) {
      //console.log(res);
      if (res.status == 200) {
        // layer.open({
        //   type: 0, //可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
        //   title: ["温馨提示"], //数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
        //   content: res.msg,
        //   btn: ["确定"],
        //   yes: function (index, layero) {
        //     console.log("点了确定");
        //     console.log(url);
        //     layer.close(index); //如果设定了yes回调,需进行手工关闭
        //     location.href = res.url; //跳转到指定地址
        //   },
        //   btn2: function (index, layero) {
        //     console.log("点了取消");
        //     console.log(url);
        //     layer.close(index);
        //     location.href = res.url; //跳转到指定地址
        //   },
        // });

        layer.msg(
          res.msg,
          {
            icon: 1,
            time: 2000,
          },
          function () {
            location.href = res.url; //跳转到指定地址
          }
        );
      } else {
        //..code
      }
    },
    error: function (res) {},
  });
  return false;
});

3、在编辑页面引入layer_hplus.js:

<script src="__ADMIN__/js/layer_hplus.js"></script>