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


Posted in Javascript onOctober 25, 2019

如下所示:

<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提交巨坑记录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
js+css3制作时钟特效
Oct 16 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP可变函数学习小结
2015/11/29 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
如何在PHP中生成随机数
2020/06/04 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python中class的定义及使用教程
2019/09/18 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python之指数与E记法的区别详解
2019/11/21 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
全国优秀教师事迹材料
2014/08/26 职场文书
运动会广播稿50字
2015/08/19 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers