一、踩坑描述
在使用layui弹窗的时候，在弹窗页面加了一个ajax实现一些逻辑，但当点击确定以后，发现页面没有等到ajax返回后就自动刷新页面，导致览器status为canceled，但是后台逻辑也完整给执行完了。
二、form表单和button按钮同时使用牵扯出的问题
| 属性值 | 描述 |
|---|---|
| submit | 该按钮是提交按钮（除了IE，该值是其他浏览器的默认值）。 |
| button | 该按钮是可点击的按钮（IE的默认值）。 |
| reset | 该按钮是重置按钮 |
提示：请始终为按钮规定 type 属性。IE的默认类型是 “button”，而其他浏览器的默认值是 “submit”。
问题复现： 我使用的chrome浏览器，button（确定按钮）默认的是submit，因此，submit放在表单内，会阻止ajax正常请求，没等ajax请求完毕，就提交了页面。导致status为caceled的发生。
解决方案：
- 方案一：可以给button按钮一个属性，type为button。
- 方案二：去掉form表单，button按钮即使type值为submit，没有form表单也不会提交。
多说一句： 如果你的ajax请求过快，在提交页面前就返回了，那么也可以阻止该事件的发生。当然，这也解决不了实际问题。
三、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的使用：
- complete(xhr,status)：请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
- beforeSend(xhr)：发送请求前运行的函数。
<!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>
四、总结
- ajax和form表单同时使用会影响ajax请求。
- 在from表单内，button按钮在非IE浏览器下会进行提交。
- 当页面提交后，ajax请求没回来呢，页面就提交了，会导致接口status为canceled。
