ajax请求status,一次偶然的ajax请求导致status为canceled的原因

本文探讨了一个登录请求在首次尝试时返回状态为canceled的问题。问题源于将div替换为form标签以启用浏览器自动补全,而登录事件绑定在button上。当点击登录时,form的submit和button的click事件同时触发,导致POST请求被GET请求的url变更中断。解决方案是避免在form内使用button进行AJAX提交,以防止此类冲突。
摘要由CSDN通过智能技术生成

如图所示,这只是一个很简单的登录请求。

f7a11f8a8d025d95c8163b732ed6d61f.png

刚看到这个请求返回状态时,也是觉着很诧异。经过确认参数等情况,发现并没有什么异常,且进行第二次登录操作时会返回正常。

排查思路:

发现url在第一次登录操作后由原来的 [*/login.html]更改为[*/login.html?email=123%40qq.com&password=123123]。

这是一个很明显的get请求方式,而login操作请求是由DOM节点$(‘#login-action’)通过post方式实现的。

可以肯定的是,有个操作将post请求干扰了。分析排查后发现是由于form标签导致的。

场景再现:

HTML:

loveJavascript

email:

password:

login

1234567891011121314

JS:$('#login-action').bind('click', function(){

$.post('/login/loguser', function(){

//具体的执行....

});

});12345

至于原因:

仅仅是由于之前为了在输入账号时让浏览器进行自动补全,而将原先的div更换为了form,而不巧的是之前的登录事件源使用的是button。

而至于为什么status = canceled,是由于在提交时,form

action与绑定于button上的click事件会同时触发。form

action将表单内容以serach的形式追加至当前url上,url变更后会导致页面重新加载, 而这正是导致post请求在执行后就被终止的原因。

总结:

1.在URL变更后,会对当前正在执行的ajax进求进行中止操作。中止后该请求的状态码将为canceled

2.在使用到ajax的时候,尽量不要在form内使用button进行提交,这些特殊的标签在特定的情况下往往会有让你迷茫的时候。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值