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语法， 包括带引号的属性名称。无法转换为JavaScript值的不可解析的字符串。

请注意诸如1E02和100.00之类的原始值的例外：它们实际上是有效的JSON，但不会被解析并保留为字符串。然而，该方法不转换“假”，“真”和“空”自己的JSON解析的值。

在生成诸如HTML输出之类的属性内容时，也要小心一点：“＆”号和小于号应写为HTML实体。