javascript - 我可以提取字符，但不能提取 JSON 字符串中受欢迎的子字符串

Question

我是 JSON 新手，但已阅读过一些网络教程(例如 http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/ )。在我网站的一个页面上，我生成了一组缩略图并通过 json 对其进行编码，如下所示:

<?php //lots of code
$sqlTh = mysqli_query($cxn, "SELECT thumb FROM video WHERE status = 'active'");
$jsonTh = array();
while ($row = mysqli_fetch_assoc($sqlTh)){ 
    $jsonTh[] = json_encode(array($row));
}
?>

然后我声明全局 varthumbs 并使用 document.ready(function () 调用我的缩略图加载函数:

<script type="text/javascript">
var thumbs = '<?php echo json_encode($jsonTh) ?>';
</script>
<script type="text/javascript">
$(document).ready(function () {
    loadThumbs();
});
</script>

函数 loadThumbs() 在外部文件中...可以警告 JSON 字符串并显示其长度，如下所示:

function loadThumbs() {
    alert(thumbs); //No problem
    alert(thumbs.length); //No problem
}

我可以看到 JSON 字符串...警报输出如下所示:

["[{"thumb":"thumbnail1.jpg"}"]", etc , etc , etc }"]"]
1756 //(string length)

现在我想做的就是查看字符串/数组的每个成员......我已尝试警告以下内容:

function loadThumbs() {
    alert(thumbs[2].thumb);
}

但警报输出是“未定义”。然后我尝试了使用 for 循环遍历数组并为数组的每个成员设置一个变量的解决方案:

function loadThumbs() {
    for (var i = 0, len = thumbs.length; i < len; i++) {
       var th = thumbs[i];
       alert(th);
    }
} 

但是，这会警告数组的所有 1756 个字符，而不是每个 .jpg 文件名。将函数稍微更改为以下内容不会发出任何警报(根本没有警报框):

function loadThumbs() {
    for (var i = 0, len = thumbs.length; i < len; i++) {
       var th = thumbs[i].thumb;
       alert(th);
    }
} 

我知道一种解决方案是在 JSON 字符串上使用 js split() 函数，但我想知道在不使用 split() 函数的情况下哪里出错了。有人可以解释一下吗？我将不胜感激任何帮助...谢谢!

Answer 1

我不是 PHP 专家，但从你的代码中我看到你正在创建一个 JSON 编码字符串数组，每一行一个，然后你对整个数组进行 JSON 编码，所以你得到的输出就是你想要的应该期待。

此外，您忘记在 javascript 端对字符串进行 JSON 解码。

尝试将您的代码更改为:

<?php //lots of code
$sqlTh = mysqli_query($cxn, "SELECT thumb FROM video WHERE status = 'active'");
$jsonTh = array();

while ($row = mysqli_fetch_assoc($sqlTh)){ 

    $jsonTh[] = array($row);     //don't encode each row!!

}
?>

<script type="text/javascript">


$(document).ready(function () {
    //use JSON.parse to re-decode on the javascript side
    var thumbs = JSON.parse('<?php echo json_encode($jsonTh) ?>');    

    for (var i = 0, len = thumbs.length; i < len; i++) {
       var th = thumbs[i].thumb;
       alert(th);
    }
} 

</script>

正如您所期望的那样，您应该会收到所有大拇指的提醒。 请注意，如果拇指属性预计包含撇号，则您也必须在 js 端对它们进行转义。