AJAX 调用阻止导航到其他页面，直到它完成

Question

这是我的 HTML5 仪表板页面的流程，它异步显示多个 Google 图表。

1. 为每个图表进行异步 AJAX 调用以检索数据。
2. AJAX 调用调用 PHP 文件。
3. PHP 文件从 Oracle 数据库中检索数据。
4. 在检索每个图表的数据时，会呈现相应的图表。

这是一个非常酷的仪表板 :-)

问题来了：当我单击同一页面上的另一个超链接（例如指向“设置”页面的链接）时，浏览器的进度图标会旋转，并且在所有图表加载完成之前它不会导航到新页面。

我认为进行“异步”调用可以让您离开页面。即使所有图表都没有完成加载，我也想离开图表页面。

我使用 Microsoft IIS 作为 Web 服务器和 PHP 7.4。

这是我进行 AJAX 调用的代码。

function drawChart(chartType, chartDivName, dataFileName, dataFileParam1, dataFileParam2) {
    var chartDiv = document.getElementById(chartDivName);

    // first, display the loading message
    chartDiv.innerHTML = "<img class='img-fluid' src='/images/loading.gif' alt='Loading...'>";

    // get the data asynchronously
    $.ajax({
        url         : dataFileName,
        method      : "POST",
        data        : {param1: dataFileParam1, param2: dataFileParam2},
        dataType    : "JSON",
        async       : true,
        success     : function(data) {
            displayChart (chartDiv, data);
        },
        error       : function(xhr, status, error) {
               chartDiv.innerHTML = "show the error";
        }
    });

} // end drawChart

这就是我调用上述函数的方式：

<!-- Load charts -->
<script>
    // set the reportDate variable and the report-date form field
    reportDate = getYesterdayDate();
    $('#report-date').val(reportDate);

    /*
    **
    ** Place all charts and dynamic data calls that need to be loaded on the pgae in this function.
    ** This function should include the call to loading the daily charts.
    **
    */
    function loadAllCharts() {
        //load daily charts and dynamic data
        loadDailyCharts();

        // load non-daily charts and dynamic data
        getHtmlData("mtd-order-total", '/om/data/mtd_om_total.php', '', '');
        getHtmlData("mtd-ar-total", '/ar/data/mtd_ar_total.php', '', '');
        drawChart('column', 'monthly-orders-chart', '/om/chart-data/monthly_om_totals.php', '', '');
        drawChart('column', 'monthly-ar-chart', '/ar/chart-data/monthly_ar_totals.php', '', '');
    }

    /*
    **
    ** Place all charts and dynamic data calls that need to be refreshed when the date field is changed
    ** in this function.
    **
    */
    function loadDailyCharts() {
        //load dynamic data
        getHtmlData("yday-order-total", '/om/data/daily_om_total.php', reportDate, '');
        getHtmlData("yday-ar-total", '/ar/data/daily_ar_total.php', reportDate, '');

        // load charts
        drawChart('single-column', 'day-orders-chart', '/om/chart-data/daily_om_by_source.php', reportDate, '')
        drawChart('single-column', 'day-ar-chart', '/ar/chart-data/daily_ar_by_type.php', reportDate, '');
    }


    // Load all charts on page load
    google.charts.setOnLoadCallback(loadAllCharts);


    // Reload charts when report-date is changed
    $('#refresh-report').click(function() {
        reportDate = $("#report-date").val();
        loadDailyCharts();
    });

</script>

Answer 1

您的 .ajax 调用是通过 $(document).ready jquery 函数进行的吗？在该上下文中进行的 AJAX 调用可能会阻止在初始 Javascript 执行后触发的 window.load() 事件。尝试使用 window.load() 而不是 document.ready()。

仅供参考——这只是我的最佳猜测。如果您可以与我分享您的 html 以及围绕您的函数调用的 Javascript，我可以做出更好的猜测。