关于在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_ibm
May 16 Javascript
Jquery 基础学习笔记
May 29 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jQuery定义插件的方法
Dec 18 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
NOT NULL 和NULL
2007/01/15 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
laravel5.6实现数值转换
2019/10/23 PHP
accesskey 提交
2006/06/26 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
Python threading多线程编程实例
2014/09/18 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python三方库之requests的快速上手
2019/03/04 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
学校百日安全生产活动总结
2014/07/05 职场文书
民间借贷借条如何写
2015/05/26 职场文书