使用.ajax讀取XML

Question

我編寫了以下代碼以從XML文件讀取變量。 該變量未傳遞到Highchart圖，我不確定為什么。 當我在變量中插入數字時，圖形可以正常工作。

  <script> $.ajax({ type: "GET", url: "data.xml", dataType: "xml", success: function(xml) { $(xml).find('height').each(function(){ var johnheight = $(this).find('john').text() var mikeheight = $(this).find('mike').text() }); } }); $(function () { var myChart = Highcharts.chart('graph', { chart: { type: 'bar' }, title: { text: null }, xAxis: { categories: [''], }, yAxis: { title: { text: null } }, series: [{ name: 'John', data: [johnheight] }, { name: 'Mike', data: [mikeheight] }] }); }); </script> 

Answer 1

$(function() {})不會等待$.ajax()調用，並且變量僅在.each()中定義。 您可以使用$.holdReady()等待$.ajax() success函數，並在函數調用之前聲明變量，可以在window或其他對象上進行聲明，並在.each()定義變量

$.holdReady(true);

var johnheight = mikeheight = void 0;

$.ajax({
       type: "GET",
       url: "data.xml",
       dataType: "xml",
       success: function(xml) {
         $(xml).find('height').each(function(){
           johnheight = $(this).find('john').text();
           mikeheight = $(this).find('mike').text();
           return false;
         });
         $.holdReady(false);
       }
    });

$(function () { 
    var myChart = Highcharts.chart('graph', {
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },
        xAxis: {
        categories: [''],
        },
        yAxis: {
            title: {
                text: null
            }
        },
        series: [{
            name: 'John',
            data: [johnheight]
        }, {
            name: 'Mike',
            data: [mikeheight]
        }]
    });
    });