JavaScript 自动解码 PHP 通过 HTML 数据属性发送的 JSON？

Question

我正在使用 Google Charts 在我正在构建的 PHP CMS 上构建一些数据库数据的图表。我可以将 javascript 代码构建到 PHP 中，但我宁愿将 Javascript 和 PHP 尽可能分开。这涉及我在 PHP 中构建 Chart_data 数组，并在 script.js 文件中使用 JQuery 发送和抓取它。在将数据捕获到 script.js 文件中之前，我对数据使用了 json_encode ；但是当它到达我的scripts.js 文件时。它已经被解析回数组的数组。不使用 JSON.parse。为什么会自动发生这种情况？而且，这是一个问题吗？

我的chart.php文件:

 $chart_data = [];
  $chart_row = [];

  $column_text = ['Data', 'All Posts', 'Active Posts', 'Draft Posts', 'Comments', 'Unapproved Comments', 'Users', 'Subscribers', 'Categories']; 
  $column_count = ['Count', $post_count, $active_post_count, $draft_post_count, $comment_count, $unapproved_comments_count, $user_count, $subscribers_count, $category_count];

  for ($i = 0; $i < count($column_text); $i++) {
    array_push( $chart_row, $column_text[$i], $column_count[$i] );
    array_push( $chart_data, $chart_row ); 
    $chart_row = [];
  }

  $chart_data_json = json_encode($chart_data);

  echo "<div id='chart_data' data-chart-data='{$chart_data_json}'></div>";

和我的scripts.js 文件:

$(document).ready(function(){

  // GOOGLE CHART FUNCTIONALITY 
  var chartData = $('#chart_data').data('chart-data');

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(chartData);

    var options = {
      axisTitlesPosition: 'none',
      chart: {
        title: '',
        subtitle: '',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
});

使用此代码一切正常。没有 JSON.parse

Answer 1

这是 .data() 的一项功能，jQuery方法:

Every attempt is made to convert the attribute's string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A string is only converted to a number if doing so doesn't change its representation (for example, the string "100" is converted to the number 100, but "1E02" and "100.000" are left as strings because their numeric value of 100 serializes to "100"). When a string starts with '{' or '[', then jQuery.parseJSON is used to parse it; it must follow valid JSON syntax including quoted property names. A string not parseable as a JavaScript value is not converted.

请注意 1E02 和 100.00 等原始值的异常(exception)情况:这些实际上是有效的 JSON，但不会被解析并保留为字符串。但是，该方法确实将“false”、“true”和“null”转换为它们的 JSON 解析值。

在生成 HTML 输出等属性内容时，请注意:与号和小于号应写为 HTML 实体。