Http响应状态Status为canceled

article/2025/9/17 10:28:44

现象
Ajax发送请求在浏览器的Network发现响应状态变为 cnaceled

解决方案
1.表单提交时用的是自定义的button 调用ajax 和form表单中的属性action冲突，

form action与绑定于button上的click事件会同时触发。form action将表单内容以get请求追加至当前url上，url变更后会导致页面重新加载，而这正是导致post请求在执行后就被终止的原因。

解决：
三选其一

去掉form标签换成div标签可用button
去掉button可用form
使用input标签的button类型

我是使用此种方式解决了该问题
2.ajax请求默认是异步的。把请求改成同步的就行了。解决：设置如下参数：async: false

$.ajax({url:'xxx',type:'post',data Type:'JSON',data:{},async:false,  //同步success:function(data){}	
})

3.ajax嵌在form里提交，然后form的提交先于ajax,导致ajax的请求没有成功，状态为canceled。解决：在ajax完成后加一个return false;取消了form提交。

模拟案例
Ajax请求成功后执行回调方法后页面会自动刷新问题

小遗憾

可惜暂时未成功模拟到请求状态为 canceled 的效果
注意函数名不能使用login 会冲突
使用第二个登陆 input 方式登陆

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax请求成功后执行回调方法后页面会自动刷新问题</title></head><body><form><input type="text" name="username" id="username" value="yc" ><input type="password" name="password" id="password" value="123456"><button onclick="logins()" id="login">登陆</button><!-- 使用input方式  --><input type="button" onclick="logins()"  value="登陆"></form><script src="js/jquery-3.5.0.js"></script><script>function logins(){$.ajax({url:"user?op=login",type : "POST",data:{username:$("#username").val(),password:$("#password").val(),},dataType: "json", contentType: "application/json; charset=utf-8",async:false, //同步success:function (data) { //回调函数if("success" == data){window.location.href = "../index.html";return false;}},error:function (data) {alert("失败,请重新登录！"); }})return false;//阻止表单提交刷新}</script></body>
</html>