Http响应状态Status为canceled

最新推荐文章于 2024-06-27 10:00:05 发布

梦凝哲雪

最新推荐文章于 2024-06-27 10:00:05 发布

阅读量8.6k

点赞数 2

分类专栏： Web 异常见闻录

本文链接：https://blog.csdn.net/Klhz555/article/details/107867151

版权

Web 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

异常见闻录

21 篇文章 0 订阅

订阅专栏

现象
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>