Question

上下文

我正在构建一个WordPress主题模板，并且我正在尝试从高级自定义字段传递数据数据＆gt;使用PHP和核心WordPress函数的Repeater Field到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>

Answer 1

在PHP脚本中查看while循环中的值的json_encode（），并回显保存它们的数据结构。 $ .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

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

    });
});

<强> JS

res.cookie('abc', 'xyz', (function(){
            var obj = {maxAge: 900000, httpOnly: true };
            if (process.env.NODE_ENV==="production"){
                obj.secure = true;
            }
            return obj;
        })());

Answer 2

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

Answer 3

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

P.S。 ajax_url包含和URL，以便在您需要时进行AJAX调用。 Here对此有一些解释。

Answer 4

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

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

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

4 个答案: