无法访问 ajax 代码中的变量

Question

我正在尝试从另一个 php 文件获取一个变量并将其设置在图表中。遗憾的是图表没有显示任何内容（因为起始值为 MachineActivityS = 0）。当我删除 var MachineActivityS = 0; 时，它说：MachineActivityS isn't defined。如果我在 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 调用 returns 后绘制，移动您的 $.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        
      });
    }
  });
};

无法访问 ajax 代码中的变量

cant reach variabel in ajax code

javascript

ajax

charts

get