gpt4 book ai didi

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

转载 作者:IT老高 更新时间:2023-10-28 12:53:28 32 4
gpt4 key购买 nike

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

它有 previewbasepaths 属性。 previewbase 具有字符串值,但 pathspath 对象的数组。

当我将 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 键,为什么它会将其类型更改为字符串?有什么办法解决吗?

编辑:

这是输出:

Output

最佳答案

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

<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

关于javascript - 将 JSON 数据从 php 传递给 html-data 属性,然后传递给 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32820601/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com