关于在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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
JavaScript如何实现元素全排列实例代码
May 14 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
浅谈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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
实用函数8
2007/11/08 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
送货司机岗位职责
2013/12/11 职场文书
物理研修随笔感言
2014/02/14 职场文书
推广普通话演讲稿
2014/05/23 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
个人党性分析总结
2015/03/05 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
纪录片信仰观后感
2015/06/08 职场文书
Django框架中表单的用法
2022/06/10 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android