关于在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使用prototype定义对象类型
Feb 07 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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利用header跳转失效的解决方法
2014/10/24 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
基于python监控程序是否关闭
2020/01/14 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
送货司机岗位职责
2013/12/11 职场文书
市场专员岗位职责
2014/02/14 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
研究生导师推荐信
2015/03/25 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript