解决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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 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
文件上传的实现
2006/10/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php页面防重复提交方法总结
2013/11/25 PHP
初识Laravel
2014/10/30 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python 转义字符详细介绍
2017/03/21 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
详解anaconda安装步骤
2020/11/23 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
《识字五》教学反思
2014/03/01 职场文书
校庆筹备方案
2014/03/30 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
介绍信格式样本
2015/05/05 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
一起来学习Python的元组和列表
2022/03/13 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python