Http响应状态Status为canceled

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

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

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

解决
三选其一

  1. 去掉form标签换成div标签 可用button
  2. 去掉button可用form
  3. 使用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请求成功后执行回调方法后页面会自动刷新问题

小遗憾

  1. 可惜暂时未成功模拟到 请求状态为 canceled 的效果
  2. 注意函数名不能使用login 会冲突
  3. 使用第二个登陆 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>

效果展示
点击第一个按钮登陆

  1. 404因为我未使用对应的servlet 可以忽略 只为 确认是否发送请求
  2. 触发的button的submit 默认效果 get请求url地址栏传参
  3. 第二个get请求 导致页面重新刷新

Http响应状态Status为canceled_第1张图片

你可能感兴趣的:(Web,错误和异常)