关于在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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
js字符串与Unicode编码互相转换
May 17 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
vue路由教程之静态路由
Sep 03 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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 mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python 获取图片分辨率的方法
2019/01/08 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python实现3D地图可视化
2020/03/25 Python
Python datetime模块的使用示例
2021/02/02 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
群众路线教育实践活动实施方案
2014/10/31 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
整改报告怎么写
2014/11/06 职场文书
物流仓管员岗位职责
2015/04/01 职场文书