Http响应状态Status为canceled

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

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

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

Http响应状态Status为canceled相关推荐

响应状态status为canceled，解决办法
在做ajax请求的时候,我也遇到响应状态status为canceled这样的坑.如下图网上找了很多资料都没解决到.最后发现是ajax请求默认是异步的.我把请求改成同步的就行了.设置如下参数:asyn ...
ajax 请求被终止 chrome查询发现请求状态status为canceled
检查页面的network执行中发现页面被刷新了url改变了导致请求在请求过程中被终止了. 检查代码发现在 submit方法中最后写了个 location.reload();方法来重载页面虽然是卸 ...
Http Status 304响应状态的资源更新机制
2019独角兽企业重金招聘Python工程师标准>>> http请求头和响应头可以避免重复的资源(css,js,图片,文本等),浏览器一般访问这些静态资源之后会缓存一段时间,静态资源 ...
ABAP应用服务器的HTTP响应状态码(Status Code)
最近Jerry参与了SAP Commerce Cloud的标准开发,我们调用微软云平台Azure上创建Lambda Function的Restful API来创建Lambda Function: 在开 ...
python构造响应头_Python爬虫库requests获取响应内容、响应状态码、响应头
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...
arduino服务器_如何使用Arduino检查Web服务器的响应状态
arduino服务器 by Harshita Arora 通过Harshita Arora 如何使用Arduino检查Web服务器的响应状态 (How to use Arduino to check ...
fastapi 响应模型 / 响应状态码 / 表单参数
文章目录 1. response_model 2. 添加输出模型 3. 响应模型编码参数 4. response_model_include 和 response_model_exclude 5. 代 ...
PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、...
异步对象 a)创建异步对象 b)设置请求的url等参数 c) 发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容布尔类型不能直接用echo输出常见的响应状态 Ajax概 ...
python request返回的响应_Python爬虫库requests获取响应内容、响应状态码、响应头...
首先在程序中引入Requests模块 import requests 一.获取不同类型的响应内容在发送请求后,服务器会返回一个响应内容,而且requests通常会自动解码响应内容 1.文本响应内容 ...

Http响应状态Status为canceled

Http响应状态Status为canceled相关推荐

最新文章

热门文章