将JSON数据从php传递到html数据属性,然后再传递到Javascript
我正在创建一个插件,用户可以在HTML的将JSON数据从php传递到html数据属性,然后再传递到Javascript,javascript,php,jquery,html,json,Javascript,Php,Jquery,Html,Json,我正在创建一个插件,用户可以在HTML的data-属性中添加自定义设置。设置是JSON格式的。我正在Javascript中使用这些设置 它具有预览、基本和路径属性预览和基本具有字符串值,但路径是路径对象的数组 当我将JSON设置直接添加到HTML中时,效果很好: <div data-side="front" data-params='{"preview": "assets/img/products/tshirt/front-preview.png", "base": "assets/img
data-
属性中添加自定义设置。设置是JSON格式的。我正在Javascript中使用这些设置
它具有预览
、基本
和路径
属性<代码>预览和基本
具有字符串值,但路径
是路径
对象的数组
当我将JSON设置直接添加到HTML中时,效果很好:
<div data-side="front" data-params='{"preview": "assets/img/products/tshirt/front-preview.png", "base": "assets/img/products/tshirt/front-base.png", "paths": "[{\"name\": \"base\", \"path\": \"M 324.00,33.00 C 324.00,33.00\", \"x\": 92, \"y\": 16, \"height\": 370}, {\"name\": \"collar\", \"path\": \"M 358.00,46.10 C 358.00,46.10\", \"x\": 170, \"y\": 17, \"height\": 21}, {\"name\": \"leftSleeve\", \"path\": \"M 633.17,170.00 C 633.17,170.00\", \"x\": 288, \"y\": 66, \"height\": 131}, {\"name\": \"leftCuff\", \"path\": \"M 595.00,438.00 C 615.47,438.23\", \"x\": 293, \"y\": 172, \"height\": 33}, {\"name\": \"rightSleeve\", \"path\": \"M 142.00,140.00 C 143.46,150.28\", \"x\": 47, \"y\": 64, \"height\": 131}, {\"name\": \"rightCuff\", \"path\": \"M 48.00,375.38 C 48.00,375.38 95.00\", \"x\": 41, \"y\": 166, \"height\": 36}]"}'>
但是现在Javascript中数据('Params')
的类型是字符串。所以,我得到了一个JSON解析错误。如果删除路径
键,其类型将更改为object
下面是我正在编码的数组的打印\r
:
Array
(
[preview] => assets/img/products/tshirt/front-preview.png
[base] => assets/img/products/tshirt/front-base.png
[paths] => Array
(
[0] => Array
(
[name] => base
[path] => M 324.00,33.00 C 324.00,33.00
[x] => 92
[y] => 16
[height] => 370
)
... and more path arrays
)
)
那么,如果我包含path
key,为什么它会将其类型更改为string呢?有办法解决吗
编辑:
以下是输出:
您需要转义数据并处理特殊字符
<div data-side="front" data-params="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">
或javascript
JSON.parse(document.querySelector('[data-side="front"]').dataset.params); // object
您是否检查了json_encode的输出?与您直接插入的相同吗?编辑了我的问题。添加的输出您是否有任何函数将json编码的结果放入html实体中?我认为默认情况下json编码不会在html实体中加引号equivalent@ReneKorss用双引号包装php代码会破坏json,因为我猜json也有双引号。对的尝试使用单引号?它不起作用。在空格后中断。HTML输出是
您是echo
-ing这个div还是在PHP标记之外?我测试了它,它为我工作。你最后的图像是正确的。应该是这样的。下面是我如何使用它的请复制粘贴我的代码。它有引号和函数参数。你是如何在JS中获得它的?请参阅我编辑的文章《如何在jQuery中获得它》。在最新的jQuery版本中,您可以使用$('[data-side=“front”]').attr('data-params');
$('[data-side="front"]').data('params'); // object
JSON.parse(document.querySelector('[data-side="front"]').dataset.params); // object