将 JSON 数据从 php 传递到 html 数据属性，然后传递到 Javascript

php javascript jquery html json

2022-08-30 11:47:49

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

它有，和属性。并具有字符串值，但是是对象的数组。previewbasepathspreviewbasepathspath

当我将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

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

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

但是现在Javascript中的typeof是.所以，我得到一个JSON解析错误。如果我删除键，其类型将更改为对象。data('Params')stringpaths

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

        )

)

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

编辑：

下面是输出：

答案 1

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

<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

答案 2

您还可以仅使用带有 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');