关于在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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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
香妃
2021/03/03 冲泡冲煮
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP时间和日期函数详解
2015/05/08 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
nodejs模块学习之connect解析
2017/07/05 NodeJs
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python按照多个条件排序的方法
2019/02/08 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
JNI的定义
2012/11/25 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
通用员工手册范本
2015/05/14 职场文书
同意报考证明
2015/06/17 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android