Question

我需要填充JavaScript函数创建的图表。该图表应填充MySQL DB数据。我在 myquery.php 中定义了SQL查询。这个PHP代码返回一个应该用于创建图表的数组。问题是如何执行 myquery.php 并获取我可以在JavaScript函数 createChartControl 中进一步使用的输出数组？

<script type="text/javascript" language="JavaScript">
function createChartControl(htmlDiv1)
{
   // Draw chart
}
(function(){
    createChartControl('schedule');
})();
</script>

Answer 1

当涉及到AJAX时，

jQuery将使您的生活变得更加轻松。如果您真的反对使用库，可以查看xmlhttprequest的示例，它们可以在普通的javascript中使用。

jQuery看起来像：

function ajaxCall(){

    $.ajax({
         url: 'myquery.php',
         type: 'POST',
         data: {any_var: var_value},
         success: function(data) {
                  var returned_array = $.parseJSON(data)
                  createChartControl(htmlDiv1, returned_array)
                  }
    })
}

基本上你将所需的任何数据发送到any_var中的myquery.php，使用$_POST['any_var']在myquery.php中检索该值，运行查询，然后json_encode数组你想要传递回你的javascript，最后解析你在成功函数中返回的data是一个可用的javascript对象。现在你可以用它做你想做的事了，但在我的例子中你可以看到我将returned_array发送到你的createChartControl()函数（需要为你的数组添加一个参数。

Tada，ajax magic。

Answer 2

我强烈建议你在JS端使用jQuery库。（http://jquery.com/）

1 - 没有Ajax :(如果您的数据在加载页面时可用）：

<script type="text/javascript" language="JavaScript">
var myData = <?php echo json_encode($myArray); ?>;

function createChartControl(htmlDiv1)
{
   // your code to draw chart
   // read myData a fill the chart
}
(function(){
    createChartControl('schedule');
})();
</script>

2 - 使用ajax（使用jQuery）：

function loadMyData(){
 $.getJSON('ajax/myquery.php', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push(val);
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
 });
}

有用的网站： http://php.net/manual/pt_BR/function.json-encode.php
http://api.jquery.com/jQuery.getJSON/
Parse JSON in JavaScript?

如何在JavaScript函数中使用MySQL DB数据？

2 个答案: