将 php 数组编码为键控 JSON 数组以在 javascript 中使用？答案

【问题标题】：Encode php array to keyed JSON array for use in javascript?将 php 数组编码为键控 JSON 数组以在 javascript 中使用？
【发布时间】：2015-06-26 13:26:26
【问题描述】：

我需要创建一个键控 JSON 数组，以将一组通过 PHP 查询的图像传递给 vegas background slideshow，它希望图像位于这样的数组中：

$("#example, body").vegas({
    slides: [
        { src: "/img/slide1.jpg" },
        { src: "/img/slide2.jpg" },
        { src: "/img/slide3.jpg" },
        { src: "/img/slide4.jpg" }
    ]
});

我尝试在 PHP 中手动将其构建为字符串，将其设置为 DOM 对象上的数据属性并像这样获取它：

<div id="example" data-slides="[{ src: "1.jpg" }, {src: "2.jpg" }]"></div>

然后：

slides: $('#example').data('slides');

这不起作用，因为我想它正在接收一个字符串，而不是一个数组。

我已尝试在[src=>"1.jpg", src=>2.jpg"] 等数组上使用json_encode，但无法获得正确的格式，例如：{ src: "img.jpg" }。我一直在数组中获取整个字符串：

["src=>\"1.jpg\"]

【问题讨论】：

标签： javascript php jquery json jquery-data

【解决方案1】：

你应该像这样在 PHP 中构建你的数组：

$slides = array(
    array("src" => "/img/slide1.jpg"),
    array("src" => "/img/slide2.jpg"),
    array("src" => "/img/slide3.jpg"),
    array("src" => "/img/slide4.jpg")
);

echo json_encode($slides);

将输出：

[{"src":"/img/slide1.jpg"},{"src":"/img/slide2.jpg"},{"src":"/img/slide3.jpg"},{ "src":"/img/slide4.jpg"}]

您确实可以将图像 JSON 字符串设置为数据（不要忘记对其进行 HTML 编码）：

<div id="example" data-slides="<?php
    echo htmlspecialchars(json_encode($slides));
?>"></div>

如果您执行$('#example').data('slides');，它将为您提供一个对象数组，因为 jQuery 已将其识别为 JSON 并将解析它。

【讨论】：

这很好用，我认为关键是array("src" => "/img/slide1.jpg")，显然我的愚蠢错误是将字符串直接推入数组并且没有htmlspecialchars()

【解决方案2】：

不确定是什么问题...

$images = array("slides" => array()); // { slides: [] }
array_push($images["slides"], array("src" => "/img/slide1.jpg")); // { slides: [ { "src": "/img/slide1.jpg" } ] }
array_push($images["slides"], array("src" => "/img/slide2.jpg"));
array_push($images["slides"], array("src" => "/img/slide3.jpg"));
array_push($images["slides"], array("src" => "/img/slide4.jpg"));
echo json_encode($images);

【讨论】：