关于在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 相关文章推荐
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
js获取内联样式的方法
Jan 27 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
python检测远程端口是否打开的方法
2015/03/14 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
python 实现Harris角点检测算法
2020/12/11 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
如何安装ruby on rails
2014/02/09 面试题
英语专业学生的自我评价
2013/12/30 职场文书
指导教师评语
2014/04/26 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2014年民警工作总结
2014/11/25 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
pycharm无法安装cv2模块问题
2022/05/20 Python