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

问题描述

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

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

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

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

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

我使用 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>

标签： javascriptphpjqueryhtmlajax

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

问题描述

解决方案

推荐阅读