Question

我对如何使用JavaScript或JQuery加载JSON文本非常新。我是JSON的新手。所以我有PHP给我一些JSON文本的图像，我已经存储在我的服务器中，如下所示：

[
    [{
        "name": "11_by_Shelest.jpg",
        "imgPath": "img/14567045410.jpg",
        "Img_ID": "62",
        "Date_Posted": "2016-02-28 17:09:01"
    },  {
        "name": "1227.jpg",
        "imgPath": "img/14566992060.jpg",
        "Img_ID": "39",
        "Date_Posted": "2016-02-28 15:40:06"
    }]
]

我希望能够使用JQuery加载此JSON文本，并设法将此函数放在一起以从text area输入字段加载脚本。这是我的HTML：

<textarea name="jsonText" rows="5" class="form-control" id="jsonText"></textarea> //JSON is added here and grabbed with JQuery
<button type="button" class="btn btn-success btn-lg" name="loadImages" id="loadImages">Load Images </button>

这是我的JQuery脚本。

$("#loadImages").click(function(e){
    var jsonText = $('#jsonText').val();
    var images = JSON.parse(jsonText);

    //console.log(images);

        var imgList= [];  
        $.each(images[0], function (name, imgPath) {
            console.log(name + " " + imgPath);
            imgList += '<img src= "' + imgPath + '" alt="' + name + '">';
        });
        $('#imgResult').append(imgList);

});

但它对我不起作用。谢谢你的帮助！

Answer 1

    <textarea name="jsonText" rows="5" class="form-control" id="jsonText">
        [
            [{
                "name": "11_by_Shelest.jpg",
                "imgPath": "img/14567045410.jpg",
                "Img_ID": "62",
                "Date_Posted": "2016-02-28 17:09:01"
            },  {
                "name": "1227.jpg",
                "imgPath": "img/14566992060.jpg",
                "Img_ID": "39",
                "Date_Posted": "2016-02-28 15:40:06"
            }]
        ]
    </textarea>
    <button type="button" class="btn btn-success btn-lg" name="loadImages" id="loadImages">Load Images </button>
    <div id="imgResult"></div>
    <script>
        $("#loadImages").click(function(e){
            var jsonText = $('#jsonText').val();
            var images = JSON.parse(jsonText);
            var imgList = '';
            $.each(images[0], function (id, imgArray) {
                console.log(imgArray);
                imgList += '<img src= "' + imgArray.imgPath + '" alt="' + imgArray.name + '">';
            });
            $('#imgResult').append(imgList);
        });
    </script>

输出是带有DIV ID的imgResult的两张图片。

JSFiddle Demo

JQuery没有加载JSON文本

1 个答案: