使用 Javascript 从 HTML 输入字段中提取 JSON 变量答案

【问题标题】：Pulling JSON variable from an HTML input field with Javascript使用 Javascript 从 HTML 输入字段中提取 JSON 变量
【发布时间】：2020-03-24 08:38:21
【问题描述】：

我有以下输入 HTML 元素，我已将 json 编码的 php 变量作为值传递。在源代码中它呈现如下：

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="{"name":[{"id":215,"fbid":"19538277626","stage_name":"311","city":"","state":"","image_path":"http:\/\/graph.facebook.com\/19538277626\/picture?width=720&height=720",
"description":"311 was formed in 1990 in Omaha, Nebraska."},{"id":18,"fbid":"14591271531","stage_name":"Beck","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/14591271531\/picture?width=720&height=720",
"description":""},{"id":47,"fbid":"137029526330648","stage_name":"Disclosure","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/137029526330648\/picture?width=720&height=720","description":""},
{"id":11,"fbid":"152513780224","stage_name":"Arcade Fire","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/152513780224\/picture?width=720&height=720","description":""}]}">

我想用javascript获取值，json_decode，然后在JS中作为数组使用。像这样：

var artist_likes = $('#js-helper-artist-likes').val();
console.log(artist_likes);
var artist_likes_decoded = $.parseJSON(artist_likes);
console.log(artist_likes_decoded);

但是，当我打印artist_likes 时，它只会显示为：

"{"

在控制台中。

我知道这是因为 JSON 包含破坏解析的引号，但是有没有办法用 JavaScript 提取文字值？

【问题讨论】：

你必须通过对它应用斜杠来放置 JSON 数组的值，然后你就被排序了。
你需要使用 JSON.parse(artist_likes)
我不是已经用 $.parseJSON(artist_likes) 做到了
stackoverflow.com/questions/4287462/… 点击此链接了解更多信息
我认为如果你使用单引号来包装所有数据，而不是双引号，你应该没问题。

标签： javascript php jquery json

【解决方案1】：

我认为错误是由于未转义的引号引起的：

value="{"name":
--------^

这里的引用没有转义。不应该是：

value="{\"name\":

这可能是原因，它被过早地切断并显示输出为{。或者处理这个问题的最好方法是用单引号：

value='{"name":

还值得注意的是，JSON 值应使用双引号而不是单引号。因此，请确保在 HTML 中使用单引号，在 JSON 值中使用双引号，并转义在 JSON 值中找到的单引号。

可能的 PHP 代码是：

value='<?php echo str_replace("'", "\\'", $jsonStuff); ?>'

【讨论】：

【解决方案2】：

您需要转义引号，一个简单的方法是使用撇号：

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value='{"quotation mark value"}' >

但是，如果您不能保证只使用引号，则这不是完全证明，更好的方法是转义每个单引号，在值内部使用反斜杠，如下所示：

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="{\"quotation mark value\"}" >

【讨论】：

【解决方案3】：

嗨，我已经为你创建了 jsfiddle

代码：-

$(document).ready(function() {
    var data = JSON.parse($('#js-helper-artist-likes').val());
    console.log(data);
});

更新代码：- value='{"name" //-在开始时使用 ' 代码而不是 "

工作示例：- http://jsfiddle.net/XUjAH/1104/

【讨论】：

您已经在value=' 处完成了单引号更改，这是 OP 必须做的。 :)

【解决方案4】：

如果您可以在该 HTML 输入值中获取该 JSONEncode 值。然后，我认为将编码值分配给 JavaScript 定义的变量会是一种更好的做法：

<script type="text/javascript">
var artist_likes = <?= json_endoe($phpVariable) ?>;
console.log(artist_likes);
</script>

【讨论】：