解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019-04-11 09:16
936 查看
先查看<form>
标签是否有action属性,如果没有,并且最后<button>标签的type属性为'submit‘时,默认提交位置就是当前页面
如果在页面右键检查,点击网络,会在开头发现这样的post包:
在右侧消息头处可见,请求网址为当前网址,并且响应头部类型为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中ajax方法无法执行回调函数问题
- 解决IE浏览器jQuery执行ajax不响应问题
- jquery中ajax函数执行顺序问题 ---设置同步
- jQuery Ajax Post 回调函数不执行问题的解决方法
- jquery中ajax函数执行顺序问题之如何设置同步
- jquery中ajax函数执行顺序问题之如何设置同步
- jQuery Ajax Post 回调函数不执行问题的解决方法
- 解决jquery的ajax调取后端数据成功却渲染失败的问题
- uchome的ajaxget函数传递中文值的问题及解决
- 解决jquery .ajax 在IE下卡死问题的解决方法
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
- [转]结合PHP实例谈谈如何解决jQuery.ajax提交GB2312或GBK编码中文乱码问题
- jquery 请求ie缓存,数据不更新的问题【ajax禁用缓存解决ie数据不更新的问题】
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
- 解决用jquery load加载页面到div时,不执行页面js的问题
- 关于php页面最大执行时间问题(set_time_limit函数在windows下不起作用的解决)
- jQuery - Ajax解决跨域问题
- ajax回调函数执行顺序带来的同步异步问题
- JQuery和Js中,如何让ajax执行完后再继续往下执行?(已解决,示例)
- 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题