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

Pulling JSON variable from an HTML input field with Javascript

本文关键字：提取 JSON 变量 字段 输入 Javascript HTML      更新时间：2023-09-26

我有以下输入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的文字值?

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

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

这里的引号没有转义。应该是:

value="{'"name'":

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

value='{"name":

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

可能的PHP代码是:

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

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

<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'"}" >

嗨，我已经为你创建了jsfield

代码:

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

更新代码:-value = "{"名称"//)的代码开始,而不是 "

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

如果你能在HTML输入值中获得JSONEncode值。然后，我认为这将是一个更好的做法分配编码值JavaScript定义的变量:

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