关于在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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
Vuex 入门教程
Jan 10 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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生成html分页列表的代码
2007/03/18 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php header函数的常用http头设置
2015/06/25 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python中的闭包函数
2018/02/09 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Python request post上传文件常见要点
2020/11/20 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
后进生转化工作制度
2014/01/17 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
开业典礼主持词
2014/03/21 职场文书
体育口号大全
2014/06/18 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
公司授权委托书
2014/10/17 职场文书
python区块链实现简版工作量证明
2022/05/25 Python