关于在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中操作Mysql数据库实例
Apr 02 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Ionic快速安装教程
2016/06/03 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python中django学习心得
2017/12/06 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python 实现汉诺塔游戏
2020/11/28 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
什么是类的返射机制
2016/02/06 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
董事会决议范本
2015/07/01 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python