javascript - 无法访问ajax代码中的变量

Question

我正在尝试从另一个 php 文件访问变量并将其设置在图表中。遗憾的是，图表没有显示任何内容(因为 MachineActivityS = 0 的起始值)。当我删除 var MachineActivityS = 0; 时，它显示:MachineActivityS 未定义。如果我在 AJAX 代码中设置图表的所有内容，它将不会显示图表。

下面您可以找到代码:

<script type="text/javascript">

var MachineActivityS = 0;
$.ajax
({

url: 'MachineActivityS.php',
type: 'get',
success: function(response)
    {
        MachineActivityS = response;
    },
});

var hours =  parseInt( MachineActivityS / 3600 ) % 24; // uren
var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
var amountOfProducts = Math.floor(((hours * 60) + minutes) * 1.8);

var barChartData = 
{
    labels : ["Activity in minutes","Number of products"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [minutes + (hours * 60), amountOfProducts]
        }

    ]

}

window.onload = function()
{
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : false,
        animation: false        
    });
}   
</script>

如何获取该文件中的值并将其设置在我的图表中？

Answer 1

您正在回调中定义一个新的 MachineActivityS。所以改变一下

success: function(response) {
  var MachineActivityS = response;
}

对此:

success: function(response) {
  MachineActivityS = response;
}

此外，由于您的 AJAX 调用是异步运行的，因此您还需要将使用 MachineActivityS 的所有内容移至该回调中。

success: function(MachineActivityS) {
  var hours =  parseInt( MachineActivityS / 3600 ) % 24; // uren
  var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
  var amountOfProducts = Math.floor(((hours * 60) + minutes) * 1.8);
  ...
}    

编辑:为确保在页面加载且 AJAX 调用返回后绘制图表，请将 $.ajax 调用移至 window.onload 事件处理程序:

window.onload = function() {
  $.ajax({
    ...,
    success: function(MachineActivityS) {
      var hours =  parseInt( MachineActivityS / 3600 ) % 24; // uren
      var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
      var amountOfProducts = Math.floor(((hours * 60) + minutes) * 1.8);

      var barChartData = ...;

      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : false,
        animation: false        
      });
    }
  });
};