将 JSON 数据从 php 传递给 html-data 属性，然后传递给 Javascript

Posted 2023-02-24

【中文标题】将 JSON 数据从 php 传递给 html-data 属性，然后传递给 Javascript

【英文标题】：Passing JSON data from php to html-data attribute and then to Javascript

【发布时间】：2015-12-25 13:17:53

【问题描述】：

我正在创建一个插件，用户在其中添加自定义设置在 html 中的 data- 属性中。设置为 JSON 格式。我在 javascript 中使用这些设置。

它有preview、base 和paths 属性。 preview 和 base 具有字符串值，但 paths 是 path 对象的数组。

当我将 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]"'>

我使用 jQuery 的 data('Params') 方法获取此值。它的类型是object。

现在，当我尝试 json_encode 一个 php 数组并将其传递给 data- 时，它已成功添加

<div data-side="front" data-params=<?php echo "'".json_encode($dataParams)."'"; ?>>

但是现在 Javascript 中的 typeof data('Params') 是 string。所以，我收到一个 JSON 解析错误。如果我删除 paths 键，它的类型会更改为对象。

这是我正在编码的数组的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

        )

)

那么，如果我包含paths 键，为什么它会将其类型更改为字符串？有什么办法解决吗？

编辑：

这是输出：

【问题讨论】：

你检查过json_encode的输出吗？和你直接插入一样吗？

编辑了我的问题。添加输出

你有什么函数可以将 json 编码的结果放入 html 实体中吗？我认为默认情况下 json 编码不会将引号放入其等效的 html 实体中

@Rene Korss 用双引号包裹 php 代码会破坏 json，因为我猜 json 也有双引号。

哦。正确的。试试单引号？

【参考方案1】：

您也可以仅使用带有 JSON_HEX_APOS 标志的 json_encode() 标志，它将所有 ' 符号转换为 \u0027 ：

<div data-side="front" data-params="<?php echo json_encode($dataParams, JSON_HEX_APOS); ?>">

然后用 JavaScript 访问它们：

$('[data-side="front"]').data('params');

【参考方案2】：

您需要转义数据并处理特殊字符。

<div data-side="front" data-params="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">

然后用 jQuery 得到它：

$('[data-side="front"]').data('params'); // object

或javascript

JSON.parse(document.querySelector('[data-side="front"]').dataset.params); // object

【讨论】：

它不起作用。在空间之后休息。 HTML 输出为<div 324.00,33.00","x":"92","y":"16","height":"370"]="" c="" 324.00,33.00="" data-params=""preview":"assets\/img\/products\/tshirt\/front-preview.png","base":"assets\/img\/products\/tshirt\/front-base.png","paths":["name":"base","path":"M" data-side="front">

你是 echo-ing 这个 div 还是在 PHP 标签之外？我测试了它，它为我创造了。你的最后一张图片是正确的。应该是这样的。

这就是我如何使用它<div data-side="front" data-params=<?php echo htmlspecialchars(json_encode($dataParams)); ?>>。输出是正确的，但它的类型是string（在 javascript 中）。如果我静态添加 JSON 设置值，它的类型是 object

请准确复制粘贴我的代码。它有引号和函数参数。你是如何在 JS 中得到它的？请参阅我编辑的帖子我如何在 jQuery 中获得它。

在最新的 jQuery 版本中你可以使用 $('[data-side="front"]').attr('data-params');