关于在LayUI中使用AJAX提交巨坑记录

 更新时间:2019年10月25日 16:41:43   作者:_LIFE_  
今天小编就为大家分享一篇关于在LayUI中使用AJAX提交巨坑记录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<script>
  layui.use(['layer', 'form','laydate'], function(){
    var layer = layui.layer
      ,laydate=layui.laydate
      ,form = layui.form;
 
    form.on('submit(go)', function(data){
      $.ajax({
        url:'/user/addOrUpdate',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          if(res.code='0'){
            parent.closeIframe(res.msg);
          }
          else
            alert(res.msg);
        },
        error:function (data) {
        }
      })
      return false;
    });
  });
</script>

上面代码的红色部分就是天坑:

症状:一个简单的AJAX提交表单操作,经常发生后台数据保存好了,前端layer弹出层没有关闭,父页面没有刷新,定位发现是回调函数没有执行!!!用Google Chrome浏览器这种现象较少,2而Safari 和 firefox浏览器100%发生。

解决过程:困扰了很久,以为是哪里代码有问题,检查来检查去没发现问题,后来基本定位到layUI这个框架。

结果:加上 红色字体 return false,解决!!

附上官方文档关于这里的说明!!

form.on('submit(*)', function(data){
 console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
 console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
 console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
 return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

这是个毛意思?AJAX提交的时候坑咋不说?

以上这篇关于在LayUI中使用AJAX提交巨坑记录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2.0实战之基础入门(1)

    vue2.0实战之基础入门(1)

    这篇文章主要为大家详细介绍了vue2.0实战第一篇基础入门的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 纯JS实现简单的日历

    纯JS实现简单的日历

    这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 15个高级前端开发小技巧总结分享

    15个高级前端开发小技巧总结分享

    这篇文章主要介绍了15种不依赖JavaScript的高级Web开发技术,涵盖了从响应式排版到图像延迟加载的各个方面,展示了现代HTML和CSS的强大功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • iframe实用操作锦集

    iframe实用操作锦集

    这篇文章主要介绍了有关iframe的实用操作,包括高度、传递数据等等,感兴趣的朋友可以参考下
    2014-04-04
  • 常见JS验证脚本汇总

    常见JS验证脚本汇总

    这篇文章主要介绍了常见JS验证脚本,结合实例形式汇总分析了JavaScript用于验证的系统自带函数与自定义函数,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案

    详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案

    这篇文章主要介绍了详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • js实现移动端编辑添加地址【模仿京东】

    js实现移动端编辑添加地址【模仿京东】

    本篇文章主要介绍了js实现移动端编辑添加地址[模仿京东]的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript SHA512加密算法详细代码

    JavaScript SHA512加密算法详细代码

    这篇文章主要为大家详细介绍了JavaScript SHA512加密算法代码,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-10-10
  • JS实现具备延时功能的滑动门菜单效果

    JS实现具备延时功能的滑动门菜单效果

    这篇文章主要介绍了JS实现具备延时功能的滑动门菜单效果,涉及JavaScript基于鼠标事件与时间函数实现页面样式延迟变换功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript链式调用原理与实现方法详解

    JavaScript链式调用原理与实现方法详解

    这篇文章主要介绍了JavaScript链式调用,结合实例形式详细分析了JavaScript链式调用基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论