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

一、踩坑描述

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

二、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一些问题_第4张图片

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

通过上述事件,引出了一个知识点:ajax异步和同步

async参数有两个值:

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

http中status状态为canceled牵扯出的ajax一些问题_第5张图片

同步的时候:
<!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一些问题_第6张图片

异步的时候:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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一些问题_第7张图片

引申一下completebeforeSend的使用:
  • complete(xhr,status):请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
  • beforeSend(xhr):发送请求前运行的函数。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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一些问题_第8张图片

四、总结

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

http中status状态为canceled牵扯出的ajax一些问题_第9张图片

你可能感兴趣的:(Ajax)