解决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 append与appendTo方法比较
May 24 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery 移除事件的方法
Jun 20 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Django视图和URL配置详解
2018/01/31 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
小学敬老月活动方案
2014/02/11 职场文书
西式婚礼主持词
2014/03/13 职场文书
课程改革实施方案
2014/03/16 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年督导工作总结
2014/11/19 职场文书
干部培训简讯
2015/07/20 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书