关于在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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
js css自定义分页效果
Feb 24 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
protractor的安装与基本使用教程
2017/07/07 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python判断telnet通不通的实例
2019/01/26 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
基于Python实现简单学生管理系统
2020/07/24 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
cf收人广告词大全
2014/03/14 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
人力资源职位说明书
2014/07/29 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
群教个人对照检查材料
2014/08/20 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
先进典型发言材料
2014/12/30 职场文书
公诉意见书范文
2015/06/05 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
《日月潭》教学反思
2016/02/20 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Python极值整数的边界探讨分析
2021/09/15 Python