关于在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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
javascript如何创建对象
2016/08/29 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python将控制台输出保存至文件的方法
2019/01/07 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
小学生开学感言
2014/02/28 职场文书
会计专业导师推荐信
2014/03/08 职场文书
生物科学专业自荐书
2014/06/20 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏