关于在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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
jQuery each()小议
Mar 18 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 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
我的论坛源代码(四)
2006/10/09 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
大专生自我评价
2014/01/28 职场文书
迎新晚会邀请函
2014/02/01 职场文书
公司应聘求职信
2014/06/21 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
车辆转让协议书
2014/09/24 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2014年电教工作总结
2014/12/19 职场文书
个人专业技术总结
2015/03/05 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
Python如何加载模型并查看网络
2022/07/15 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS