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

Question

我正在使用Google Charts在要构建的PHP CMS上构建一些数据库数据的图表。我可以将JavaScript代码构建到PHP中，但我希望将Javascript和PHP尽可能分开。这涉及到我在PHP中构建chart_data数组，并使用scripts.js文件中的JQuery发送和获取它。我先在数据上使用json_encode，然后再将其捕获到scripts.js文件中；但是，当它到达我的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方法的功能：尝试将属性的字符串值转换为JavaScript值（包括布尔值，数字，对象，数组和null）。字符串仅在不改变其表示形式的情况下才转换为数字（例如，字符串“ 100”转换为数字100，但是将“ 1E02”和“ 100.000”保留为字符串，因为它们的数值为100序列化为“ 100”）。当字符串以'{'或'['开头时，则jQuery.parseJSON用于解析它；它必须遵循有效的JSON语法，&nbsp;包括带引号的属性名称。无法转换为JavaScript值的不可解析的字符串。请注意诸如1E02和100.00之类的原始值的例外：它们实际上是有效的JSON，但不会被解析并保留为字符串。然而，该方法不转换“假”，“真”和“空”自己的JSON解析的值。在生成诸如HTML输出之类的属性内容时，也要小心一点：“＆”号和小于号应写为HTML实体。