时间戳

首页 > 解决方案 > 如何保证一个 ajax 调用在调用另一个之前完成？

javascript - 如何保证一个 ajax 调用在调用另一个之前完成？

问题描述

我正在开发一个烧瓶应用程序，并且有一个与表单相关联的 javascript 函数

function applyQueries() {
        // does some things
        if(currentCatalog != ''){
            addCatalogFilters(currentCatalog);
        }
        $.ajax({
            type: 'POST',
            url:  "/applyQueries",
            contentType: "application/json",
            success:function(response){ 
                        // does some stuff here
        })
}

addCatalogFilters() 函数也是一个ajax 调用。这两个调用都改变了 python 方面的一些变量。我想知道的是，是否保证第一个 ajax 调用（在 addCatalogFilters 中）在第二个调用之前执行并返回。我最终得到了奇怪的结果，这些结果似乎是基于 ajax 调用执行顺序的竞争条件。像这样结构的代码可以做到这一点吗？另外，如果是这样，我该如何解决？

    // Add user catalog filters
    function addCatalogFilters() {
        catalog = currentCatalog;
        formData = new FormData(document.getElementById('catalogFilterForm'));
        $.ajax({
            type: 'POST',
            url:  "/addCatalogFilters",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response){
                document.getElementById(catalog + 'close').style.display = 'block';
                document.getElementById(catalog + 'check').style.display = 'none';
                addBtns = document.getElementsByClassName("addBtn");
                removeBtns = document.getElementsByClassName("removeBtn");
                for (i = 0; i < addBtns.length; i++) {
                    addBtns[i].style.display = "none";
                    removeBtns[i].style.display = "inline-block";
                }
            }
        })
    };

标签： javascriptjqueryajaxasynchronous

解决方案

您可以确保使用 ajax 的成功功能。首先调用一个 ajax（比如说 ajax1），然后在第一个 ajax 调用的成功函数（ajax1 成功函数）中调用另一个 ajax 调用。

addCatalogFilters(currentCatalog)
{
    $.ajax({
            type: 'POST',
            url:  "/the-post-usl",

            success:function(response){ 

                $.ajax({
                type: 'POST',
                url:  "/applyQueries",
                contentType: "application/json",
                success:function(response){ 
                        // does some stuff here
                });
        })
}

function applyQueries() {
        // does some things
        if(currentCatalog != ''){
            addCatalogFilters(currentCatalog);
        }

}

这可能不是最佳方式。但要保证一个 ajax 调用在调用另一个之前完成。

推荐阅读