在使用layui弹窗的时候,在弹窗页面加了一个ajax实现一些逻辑,但当点击确定以后,发现页面没有等到ajax返回后就自动刷新页面,导致览器status为canceled,但是后台逻辑也完整给执行完了。
属性值 | 描述 |
---|---|
submit | 该按钮是提交按钮(除了IE,该值是其他浏览器的默认值)。 |
button | 该按钮是可点击的按钮(IE的默认值)。 |
reset | 该按钮是重置按钮 |
提示:请始终为按钮规定 type 属性。IE的默认类型是 “button”,而其他浏览器的默认值是 “submit”。
问题复现: 我使用的chrome浏览器
,button(确定按钮)默认的是submit,因此,submit放在表单内,会阻止ajax正常请求,没等ajax请求完毕,就提交了页面。导致status为caceled的发生。
解决方案:
多说一句: 如果你的ajax请求过快,在提交页面前就返回了,那么也可以阻止该事件的发生。当然,这也解决不了实际问题
。
通过上述事件,引出了一个知识点:ajax异步和同步
。
async参数有两个值:
项目 | 描述 |
---|---|
true | 异步请求,不需要等ajax返回结果继续往下执行 |
false | 同步请求,需等待ajax返回结果后才能继续往下执行 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<button id="but" type="button">点击我哦</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#but").click(function () {
var name = $("#name").val();
$.ajax({
type:'post',
url:"test.php",
async:false,
data:{
'name':name
},
success:function(data){
console.log("成功后的返回值:"+data);
},
error:function () {
console.log(321)
}
});
console.log("我在ajax后执行哦!");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<button id="but" type="button">点击我哦</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#but").click(function () {
var name = $("#name").val();
$.ajax({
type:'post',
url:"test.php",
async:true,
data:{
'name':name
},
success:function(data){
console.log("成功后的返回值:"+data);
},
error:function () {
console.log(321)
}
});
console.log("我在ajax后执行哦!");
})
</script>
</body>
</html>
complete
和beforeSend
的使用:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<button id="but" type="button">点击我哦</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#but").click(function () {
var name = $("#name").val();
$.ajax({
type:'post',
url:"test.php",
async:true,
data:{
'name':name
},
success:function(data){
console.log("成功后的返回值:"+data);
},
error:function () {
console.log("执行失败了哦");
},
complete:function () {
console.log("我是成功或失败后执行的哦");
},
beforeSend:function () {
console.log("我是最先执行的哦");
}
});
console.log("我在ajax后执行哦!");
})
</script>
</body>
</html>
本文地址:https://blog.csdn.net/qq_42249896/article/details/107371111
如对本文有疑问, 点击进行留言回复!!
荐 http中status状态为canceled牵扯出的ajax一些问题
网友评论