解决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实现简单的抽奖游戏
May 05 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery append与appendTo方法比较
May 24 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 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脚本数据库功能详解(上)
2006/10/09 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
window.open的功能全解析
2006/10/10 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python 写的一个爬虫程序源码
2016/02/28 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python write无法写入文件的解决方法
2019/01/23 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python中entry用法讲解
2020/12/04 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
电脑专业个人求职信范文
2014/02/04 职场文书
幼儿园运动会口号
2014/06/07 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
《迟到》教学反思
2016/02/24 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS