解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题


Posted in jQuery onApril 10, 2019

先查看<form>标签是否有action属性,如果没有,并且最后<button>标签的type属性为'submit‘时,默认提交位置就是当前页面

如果在页面右键检查,点击网络,会在开头发现这样的post包:

解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题

在右侧消息头处可见,请求网址为当前网址,并且响应头部类型为html

所以只要把form表单里最后提交按钮的type="submit"换为type="button",把按钮变成原生按钮,

就可以正确使用ajax方法传递数据,原因就是form表单最后的提交按钮与使用ajax传递数据冲突了

因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

先贴一下ajax代码:

$(function () {
      $("#register").on('click',function () {
        $.ajax({
          type: 'post',
          url:"{:url('insert')}",
          data:$('#login').serialize(),
          dataType:'json',
          success:function (data) {
            alert('成功');
          },
          error:function () {
            alert('error');
          }
        })
      })
    });

这里‘#register'是提交按钮,‘#login'是表单,url发送到一个php脚本(插入表单数据到数据库)。

用谷歌浏览器打开页面,点击注册按钮后,当前页面刷新,没有任何反应。

正常情况下,ajax执行正确或失败,根据上述代码都应该有消息弹窗,于是感觉到哪里出了问题。

打开数据库,发现表单的数据都已经插入到数据库了,说明后台php脚本是运行成功的,只是在返回数据的时候出现了问题。

右键检查找到该post包,发现响应头部类型为html,而我设置的返回类型为json。

更换了Edge浏览器,问题同样是数据库插入了数据,但是结果没有消息弹窗。

更换火狐浏览器,再次点击注册按钮时出现了消息弹窗,但是闪了一下就没了!隐隐约约发现弹窗显示为‘error'(感谢火狐浏览器!)

总结

以上所述是小编给大家介绍的解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
jQuery分组选择器简单用法示例
Apr 04 #jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
javascript引用对象的方法
2007/01/11 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python深入学习之闭包
2014/08/31 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python正则表达式之对号入座篇
2018/07/24 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
工伤调解协议书
2016/03/21 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
Vue.Draggable实现交换位置
2022/04/07 Vue.js
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技