解决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 21 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery插件实现代码雨特效
Apr 24 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/06/17 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php获取文件大小的方法
2014/02/26 PHP
php实现的简单检验登陆类
2015/06/18 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
selenium自动化测试入门实战
2020/12/21 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
让生命充满爱观后感
2015/06/08 职场文书
签字仪式主持词
2015/07/03 职场文书
生日宴会祝酒词
2015/08/10 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS