Javascript 如何将PHP数组传递给JS以便在循环中使用？

上下文

我正在构建一个WordPress主题模板，并尝试使用PHP和核心WordPress函数将一组数据从高级自定义字段>重复字段传递到JavaScript/HTML5饼图

问题

我不知道如何将PHP数据以JS理解的格式传递给JS

问题

我不相信我问的问题是正确的，或者思考的问题是正确的。例如，我相信我可以使用JS直接与数据库通信。但我认为问题是：

• 如何将PHP数组传递到循环外部，并转换为JS可读的格式
• 关于该主题的培训材料或课程有哪些链接

代码

这是我的密码：

<?php
if( have_rows('tpc_psmr_referrer') ):
  while ( have_rows('tpc_psmr_referrer') ) : the_row();
        $tpc_psmr_referrer_type = get_sub_field('tpc_psmr_referrer_type');
        $tpc_psmr_referrer_platform = get_sub_field('tpc_psmr_referrer_type_platform'); // This needs to get passed as an array to the JS below.
  endwhile;
endif;
?>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data1 = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2], // This is where the PHP array needs to be output.
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'Revenue'
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));

  chart1.draw(data1, options);

  var data2 = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'Budget'
  };

  var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));

  chart2.draw(data2, options);
}
</script>

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data1=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[Work'，11]，
['Eat'，2]，//这是PHP数组需要输出的地方。
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]);
变量选项={
标题：“收入”
};
var chart1=新的google.visualization.PieChart（document.getElementById（'piechart1'）；
图表1.绘图（数据1，选项）；
var data2=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[Work'，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]);
变量选项={
标题：“预算”
};
var chart2=新的google.visualization.PieChart（document.getElementById（'piechart2'）；
图表2.绘图（数据2，选项）；
}

看看json_encode（）'在PHP脚本中对while循环中的值进行编码，并回显保存这些值的数据结构。$。ajax（）请求脚本，并解析/调整成功回调中前端返回的JSON

更具体地说，有关该过程中涉及的机制的更多信息的链接，请查看php.net上的json_encode（示例1非常简单）：

以及$.ajax上的jQuery API文档：

SCRIPT.PHP

<?php 

  header("Content-type: application/json");

  $data_array = ['one','two','three'];
  $json = json_encode($data_array);
  echo $json;

?>

var array=JSON.parse（document.getElementById（'yellowstone'）.innerHTML）；

WordPress有一个名为的函数。它允许您将数组传递给脚本，然后在JS中作为对象访问它。
例如：

wp_localize_script( 'your_script', 'your_script_data',
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'var_1' => 'value 1',
        'var_2' => 'value 2',
    )
);

然后在你的JS中的某个地方

alert(your_script_data.var_1)

将显示

值1

---

附言：ajax\u url包含和url，以便在需要时调用ajax。有一些解释。

我想你需要这样的东西：

<?php
$php_var = [['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2], 
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]];
?>


<script type="text/javascript">
    var data = <?= json_encode($php_var, JSON_HEX_TAG) . ';' ?>   
</script>

风险值数据=

看这个

其他有用的链接：

---

是否要从javascript向php发出ajax请求？使用数据属性并向其输出php变量（以及json_编码-）。然后可以从JS中检索@BenDubuisson这是一种方法，但我认为应该将JSON放在一个不可见的元素中，以避免出现XSS（）@JakubJudas不可见的元素不能防止XSS可能的重复，如果您这样做，还不如直接将其作为Javascript变量输出<代码>变量数组=使用这种方法不必要地混合了标记、js和php。从专用的php脚本请求数据更简洁。@mdlanglais-example？@Frank请看上面的答案，我添加了一个基本的工作示例。此时，您可以使用回调中返回的值执行任何操作。这样，您的关注点就被分开了，js在一个js文件中，服务器端代码在它自己的脚本中？该状态下的文档用于用unicode值替换<和>。是的，我使用JSON_HEX_标记来解决安全问题，因为将原始字符串传递给JSON编码可能会导致XSS攻击。请参阅。谢谢，这似乎可行，但有几个问题需要澄清：文档中说明wp_localize_脚本的模型是

wp_localize_脚本（字符串$handle，字符串$object_name，数组$l10n）

但您的模型建议将句柄作为我的脚本路径？定位是我的阵列。所以这似乎会输出一个错误。@Spencershill这就是它的工作原理。不会有任何错误。Handle是您在脚本排队时给它的名称（wp_enqueue_script的第一个参数），是的，本地化实际上是您的数组。

alert(your_script_data.var_1)

<?php
$php_var = [['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2], 
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]];
?>


<script type="text/javascript">
    var data = <?= json_encode($php_var, JSON_HEX_TAG) . ';' ?>   
</script>