解决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 相关文章推荐
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
prototype 的说明 js类
2006/09/07 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python序列循环移位的3种方法推荐
2018/04/09 Python
python实现AES加密和解密
2019/03/27 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python txt文件如何转换成字典
2020/11/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
上课玩手机检讨书
2014/02/08 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
个人先进事迹材料
2014/12/29 职场文书
陕西导游词
2015/02/04 职场文书
公司周年庆典致辞
2015/07/30 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python