将 JSON 数据从 php 传递给 html-data 属性，然后传递给 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32820601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing JSON data from php to html-data attribute and then to Javascript
提问by Kanav
i'm creating a plugin in which the user adds custom settings in data-attribute in HTML. Settings are in JSON format. I'm using these settings in Javascript.
我正在创建一个插件，其中用户data-在 HTML 的属性中添加自定义设置。设置采用 JSON 格式。我在 Javascript 中使用这些设置。
It has got preview, baseand pathsproperties. previewand basehave string values, but pathsis an array of pathobjects.
它有preview,base和paths属性。preview并且base有字符串值，但是paths是一个path对象数组。
It works fine when i add JSON setting directly into the HTML:
当我将 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}]"}'>
I'm getting this value using data('Params')method of jQuery. Its type is object.
我正在使用data('Params')jQuery 的方法获取此值。它的类型是object.
Now, when i'm trying to json_encodea php array and pass it to the data-, it's added successfully
现在，当我尝试json_encode使用 php 数组并将其传递给 时data-，它已成功添加
<div data-side="front" data-params=<?php echo "'".json_encode($dataParams)."'"; ?>>
But now typeof data('Params')in Javascript is string. So, i'm getting a JSON parse error. If i remove pathskey, its type changes to object.
但是现在data('Params')Javascript 中的typeof是string. 所以，我收到了一个 JSON 解析错误。如果我删除paths键，它的类型将更改为对象。
Here's the print_rof the array that i'm encoding:
这print_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
)
)
So, why does it changes its type to string if i include pathskey? Any way to solve it?
那么，如果我包含paths键，为什么它会将其类型更改为字符串？有什么办法解决吗？
Edit:
编辑：
Here's the output:
这是输出：
回答by Rene Korss
You need to escape data and handle special characters.
您需要转义数据并处理特殊字符。
<div data-side="front" data-params="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">
And get it with jQuery:
并使用 jQuery 获取它：
$('[data-side="front"]').data('params'); // object
