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

【问题标题】：How do you pass a PHP array to JS for use in a loop?如何将 PHP 数组传递给 JS 以在循环中使用？
【发布时间】：2018-05-07 21:49:36
【问题描述】：

上下文

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

问题

我不知道如何以 JS 理解的格式将 PHP 数据传递给 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>

【问题讨论】：

你打算从 javascript 向你的 php 发出 ajax 请求吗？
使用数据属性并将 PHP 变量输出给它（并对其进行 json_encode - php.net/manual/en/function.json-encode.php）。然后您可以从 JS 中检索。 developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
@BenDubuisson 这是一种方法，但我认为宁愿将 JSON 放在一个不可见的元素中以避免任何 XSS 的机会（owasp.org/index.php/…）
@JakubJudas 一个不可见的元素不会阻止 XSS
how to access PHP variables from within JavaScript?的可能重复

标签： javascript php wordpress advanced-custom-fields

【解决方案1】：

WordPress 有一个名为wp_localize_script 的函数。它允许您将数组传递给脚本，然后在 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)

将显示value 1

附： ajax_url 包含用于进行 AJAX 调用的 URL，以防您也需要。 Here 对此做了一些解释。

【讨论】：

谢谢，这似乎可行，但有几个澄清问题：文档说明 wp_localize_script 的模型是wp_localize_script( string $handle, string $object_name, array $l10n )，但您的模型建议句柄成为我的脚本路径？本地化是我的阵列。所以看起来会输出一个错误。
@SpencerHill 这正是它的工作原理。不会有任何错误。 Handle 是您在将脚本加入队列时为其指定的名称（wp_enqueue_script 的第一个参数），是的，本地化实际上就是您的数组。

【解决方案2】：

我认为你需要这样的东西：

<?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>

看到这个PHPFiddle。

其他有用的链接：

how-to-pass-variables-and-data-from-php-to-javascript

pass-a-php-array-to-a-javascript-function

【讨论】：

你为什么使用 JSON_HEX_TAG？该州的文档用于将替换为其 unicode 值。
是的，我使用 JSON_HEX_TAG 来解决安全问题，因为将原始字符串传递给 JSON 编码会导致 XSS 攻击。见stackoverflow.com/questions/6816787/…。

【解决方案3】：

查看 json_encode() 在您的 while 循环中对值进行处理，并在 PHP 脚本中回显保存它们的数据结构。 $.ajax() 请求脚本，并在成功回调中解析/适配前端返回的 JSON。

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

http://php.net/manual/en/function.json-encode.php

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

http://api.jquery.com/jquery.ajax/

SCRIPT.PHP

<?php 

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

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

?>

$('document').ready(function() {
    $.ajax({
        type:'POST',
        url:'/the/path/to/script.php',
        dataType:'JSON',
        data:{
        },
        success:function(data){
            $.each(data,function(x,y) {
                console.log(data[x]);
            });  
        },
        error:function(jqXHR,textStatus,errorThrown){
            console.log('Could not retrieve JSON');
        }

    });
});

【讨论】：

【解决方案4】：

<?php $data_array = [1,2,3...]; ?>

<html>
  <div id='yellowstone' hidden>
     <?php echo json_encode($data_array); ?>
  </div>
</html>


<script>
     var array = JSON.parse(document.getElementById('yellowstone').innerHTML);
</script>

【讨论】：

如果您这样做，不妨直接将其作为 Javascript 变量输出。 <script> var array = <?php echo json_encode($data_array); ?>; </script>
使用这种方法不必要地混合标记、js 和 php。从专用的 php 脚本请求数据更简洁。
@mdlanglais 例子？
@Frank 见我上面的回答，我添加了一个基本的工作示例。您可以使用回调中返回的值做您想做的事情。这样你的关注点就分开了，js在一个js文件中，服务器端代码在它自己的脚本中。