多个ajax串行、并行

最新推荐文章于 2024-05-16 16:52:11 发布

driver1999

最新推荐文章于 2024-05-16 16:52:11 发布

阅读量1.1k

点赞数

分类专栏： javaWeb 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_43603028/article/details/122446740

版权

javaWeb 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

串行

//串行执行分两种。
//1.是用同步模式async: false，三个ajax请求连着写就可以了。
$.ajax({
    url: "ajax请求1",
    async: false,
    success: function (data) {
        console.log("ajax请求1 完成");
    }
});
$.ajax({
    url: "ajax请求2",
    async: false,
    success: function (data) {
        console.log("ajax请求2 完成");
    }
});
$.ajax({
    url: "ajax请求3",
    async: false,
    success: function (data) {
        console.log("ajax请求2 完成");
    }
});
 
//2.是用异步模式async: true，三个ajax请求嵌套写。
$.ajax({
    url: "ajax请求1",
    async: true,
    success: function (data) {
        console.log("ajax请求1 完成");
        $.ajax({
            url: "ajax请求2",
            async: true,
            success: function (data) {
                console.log("ajax请求2 完成");
                $.ajax({
                    url: "ajax请求3",
                    async: true,
                    success: function (data) {
                        console.log("ajax请求3 完成");
                    }
                });
            }
        });
    }
});

并行

//并行执行就只能用异步模式。可以用计数查看效果
var num = 0;
function isAllSuccess() {
    num++;
    if (num>=3)
        console.log("三个ajax请求全部完成");
}
$.ajax({
    url: "ajax请求1",
    async: true,
    success: function (data) {
        console.log("ajax请求1 完成");
        isAllSuccess();
    }
});
$.ajax({
    url: "ajax请求2",
    async: true,
    success: function (data) {
        console.log("ajax请求3 完成");
        isAllSuccess();
    }
});
$.ajax({
    url: "ajax请求3",
    async: true,
    success: function (data) {
        console.log("ajax请求3 完成");
        isAllSuccess();
    }
});