关于在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 创建对象
Jul 17 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
JS性能优化实现方法及优点进行
Aug 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
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python web框架中实现原生分页
2019/09/08 Python
django自定义模板标签过程解析
2019/12/14 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
网络安全类面试题
2015/08/01 面试题
大学毕业后的十年规划
2014/01/07 职场文书
考试违纪检讨书
2014/02/02 职场文书
趣味运动会活动方案
2014/02/12 职场文书
铁路安全事故反思
2014/04/26 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
婚宴父亲致辞
2015/07/27 职场文书
班主任培训研修日志
2015/11/13 职场文书