荐 http中status状态为canceled牵扯出的ajax一些问题

程序员文章站 2022-03-07 13:43:12

在使用layui弹窗的时候，在弹窗页面加了一个ajax实现一些逻辑，但当点击确定以后，发现页面没有等到ajax返回后就自动刷新页面，导致览器status为canceled，但是后台逻辑也完整给执行完了。...

一、踩坑描述

在使用layui弹窗的时候，在弹窗页面加了一个ajax实现一些逻辑，但当点击确定以后，发现页面没有等到ajax返回后就自动刷新页面，导致览器status为canceled，但是后台逻辑也完整给执行完了。
荐
http中status状态为canceled牵扯出的ajax一些问题

二、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请求过快，在提交页面前就返回了，那么也可以阻止该事件的发生。当然，这也解决不了实际问题。

荐
http中status状态为canceled牵扯出的ajax一些问题

三、ajax中同步和异步的区别

通过上述事件，引出了一个知识点：ajax异步和同步。

async参数有两个值：

项目	描述
true	异步请求，不需要等ajax返回结果继续往下执行
false	同步请求，需等待ajax返回结果后才能继续往下执行

测试页面：

荐
http中status状态为canceled牵扯出的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>

荐
http中status状态为canceled牵扯出的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:true,
            data:{
                'name':name
            },
            success:function(data){
                console.log("成功后的返回值："+data);
            },
            error:function () {
                console.log(321)
            }
        });
        console.log("我在ajax后执行哦！");
    })
</script>
</body>
</html>

荐
http中status状态为canceled牵扯出的ajax一些问题

引申一下`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>

荐
http中status状态为canceled牵扯出的ajax一些问题

四、总结

ajax和form表单同时使用会影响ajax请求。
在from表单内，button按钮在非IE浏览器下会进行提交。
当页面提交后，ajax请求没回来呢，页面就提交了，会导致接口status为canceled。

荐
http中status状态为canceled牵扯出的ajax一些问题

本文地址：https://blog.csdn.net/qq_42249896/article/details/107371111

荐 http中status状态为canceled牵扯出的ajax一些问题

一、踩坑描述

二、form表单和button按钮同时使用牵扯出的问题

三、ajax中同步和异步的区别

测试页面：

同步的时候：

异步的时候：

引申一下complete和beforeSend的使用：

四、总结