如何使用 JavaScript 将数据从 AJAX 成功回调发送到 Chart.js

解决方案 1：通过回调将 AJAX 数据传递到 Chart.js

此方法使用 Chart.js 呈现图表并使用 jQuery 进行 AJAX。该解决方案中使用回调将数据从 AJAX 成功方法传输到不同的函数。

$(document).ready(function() {
    loadSkiResortData();
});

function loadSkiResortData() {
    $.ajax({
        method: 'GET',
        url: '/admin/sknowed/loadSkiResortData',
        success: function(response) {
            const obj = JSON.parse(response.weatherData);
            const temperatures = obj.hourly.temperature_2m;
            const times = obj.hourly.time;
            renderChart(times, temperatures);
        },
        error: function() {
            console.error('Failed to load data');
        }
    });
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

解决方案 2：带有 Promise 的模块化方法

在此方法中，代码是模块化的，并且来自 AJAX 成功处理程序的数据通过 JavaScript Promise 而不是回调传递。因此确保了更好的可读性和灵活性。

$(document).ready(function() {
    loadSkiResortData()
        .then(data => {
            const { temperature_2m, time } = data.hourly;
            renderChart(time, temperature_2m);
        })
        .catch(error => console.error('Error loading data:', error));
});

function loadSkiResortData() {
    return new Promise((resolve, reject) => {
        $.ajax({
            method: 'GET',
            url: '/admin/sknowed/loadSkiResortData',
            success: function(response) {
                const data = JSON.parse(response.weatherData);
                resolve(data);
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

解决方案 3：将 Fetch API 与 Async/Await 结合使用

这种方法使用 async/await 来处理异步数据，并用更新的 Fetch API 替代 jQuery AJAX。为了稳健性，还包括错误处理。

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const data = await loadSkiResortData();
        const { temperature_2m, time } = data.hourly;
        renderChart(time, temperature_2m);
    } catch (error) {
        console.error('Error loading data:', error);
    }
});

async function loadSkiResortData() {
    const response = await fetch('/admin/sknowed/loadSkiResortData');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const result = await response.json();
    return JSON.parse(result.weatherData);
}

function renderChart(labels, data) {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Temperature Over Time',
                data: data,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

在 JavaScript 中传递 AJAX 数据的常见问题

1. 如何将 AJAX 数据传递给另一个函数？
2. 要将数据发送到另一个方法，请使用回调函数 success AJAX 调用的处理程序。
3. 的作用是什么 JSON.parse() 在处理服务器数据时？
4. 为了方便数据操作， JSON.parse() 将服务器的 JSON 字符串响应转换为 JavaScript 对象。
5. 如何处理 AJAX 调用期间的错误？
6. 为了有效地管理错误，请利用 catch() 块在一个 fetch() 请求，或使用 error AJAX 中的回调。
7. 如何确保图表中的动态数据得到更新？
8. 添加新标签或数据后，调用 update() 在你的 Chart.js 对象用最新值更新图表。
9. 怎么样 async/await 帮助处理 AJAX 请求吗？
10. async/await 使异步代码显得更加同步，增强可读性和AJAX调用错误处理。

关于在 JavaScript 中处理异步数据的最终想法

开发动态在线应用程序时，从 AJAX 成功函数到代码其他部分的数据传输至关重要。您可以确保干净、可重用的代码，并通过利用模块化功能来加快此过程。

此外，开发人员可以通过使用以下策略更好地管理异步数据： 承诺 和 异步/等待，增强可读性和可维护性。当错误得到正确处理时，解决方案就会变得可靠且易于使用。