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

我需要填充由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>

函数createChartControl（htmlDiv1）
{
//绘制图表
}
（功能（）{
createChartControl（“计划”）；
})();

使用AJAX时，您的生活会变得更加轻松。如果您确实反对使用库，您可以查看一些示例，这些示例可以在纯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\u var

中向myquery.php发送任何想要的数据，使用

$\u POST['any\u var']

在myquery.php中检索该值，运行查询，然后将想要传递回javascript的数组，最后在success函数中将返回的

数据解析为可用的javascript对象。现在你可以用它做你想做的，但是在我的例子中你可以看到我把
返回的数组
发送到你的
createChartControl（）
函数（它需要为你的数组添加一个参数）

Tada，ajax magic。
我强烈建议您在JS端使用jQuery库。（）

1-没有Ajax：（如果加载页面时数据可用）：


var myData=；
函数createChartControl（htmlDiv1）
{
//绘制图表的代码
//读取我的数据并填写图表
}
（功能（）{
createChartControl（“计划”）；
})();

2-使用ajax（使用jQuery）：

函数loadMyData（）{
$.getJSON（'ajax/myquery.php'，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
物品推送（val）；
});
$（“
”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“主体”）；
});
}

有用网站：




只需通过谷歌搜索即可使用：谷歌AJAX了解更多信息初始页面加载后是否需要填充图表，还是要在初始页面加载时填充数据（即，使用PHP呼出一些javascript变量或对象声明？）首先，我需要知道你的源代码如何。你想用ajax获取数据，对吗？！你在Javascript端使用ajax框架吗？在PHP端使用视图框架吗（比如smarty）？我不确定，但也许json_encode是一个好的解决方案？
<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>

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');
 });
}