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

Question

我需要创建一个键控 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');

这是行不通的，因为我想它接收的是一个字符串，而不是一个数组。

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

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

Answer 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 并将解析它。