在用highchart插件做图表的时候后,需要从后台传入json数据进行设置:
前端代码:
var series= {$project}; //数据列表,主要是这一项是后台传入的json数据
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
后端代码:
$project_json=json_encode($project_arr);//将该项数据转换成json格式
$view = [
'config' => $config,
'user' => $user,
'message' => $message ?? 0,
'messageCatUrl' => $messageCatUrl,
'indexTips' => $this->getIndexTips(),
'business' => $business,
'project' => $project_json //加入模板变量
];
View::assign($view);
return View::fetch();
结果发现,在前端json数据被转化成html代码:
在网上搜索,各种五花八门的答案,有说json_encode($project_arr)里加常量参数的,有说在html文件的头部加<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />的,有说在传递之前替换"的,有说使用htmlspecialchars_decode()函数将其处理回原来的字符串,这些说法都不适用这个问题,因为在后端查看的json数据是正确的,传到前端就变样了,这时候在后端怎么折腾这个数据都是没用的。我感觉问题还是出在thinkphp框架上,它在进行模板变量传递和渲染的时候,默认进行HTML转化。查看临时文件,果然是这样:
知道问题出在哪里,就好办了,thinkphp官方使用在模板变量后加上“|raw”的后缀使得变量原样输出。即:
var series= {$project|raw}; //原样输出
效果如下:
这样输出就正常了
---------------------------------------------------------------------------------------------------------------------------------
2022年4月8日更新:
php结合bootstrap-table等表格插件使用的时候,表格插件可以设置获取数据的方式,如果是从后台直接获取的话,如:
那么是无法像上面一样使用模板变量参数原样输出的方式来实现解码的。但是我们可以在前端使用js的转码方式来进行转码。相关的函数如下:
/ZTX-003前端把转义符转为普通字符 by折腾侠
function escape2Html(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
在格式化字段显示的时候,增加转义步骤即可: