JQuery 不加载 JSON 文本答案

【问题标题】：JQuery not loading JSON textJQuery 不加载 JSON 文本
【发布时间】：2016-02-29 14:18:43
【问题描述】：

我对如何使用 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);

});

但这对我不起作用。提前感谢您的帮助！

【问题讨论】：

图片的内容是什么？它应该是 JSON 文件的路径，是吗？
如果您的 JSON 字符串在 textarea 中，则无需使用 $.getJSON。事实上，这很可能会导致语法错误。您发布的 JSON 示例也无效。
@Cruiser images 是解析后的 JSON 对象。
@dasjanik 是的，我确定我的代码不正确，但我不仅仅是如何修复它。
@RoryMcCrossan 我通过jsonlint.com 运行了我的 JSON，它告诉我我的 JSON 是有效的。有什么不妥之处？

标签： javascript php jquery json

【解决方案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

【讨论】：

您好，感谢您的帮助。这是附加到页面<img src="[object Object]" alt="0"> 的内容，所以看起来它不是传递对象的值，而是传递对象本身。
老兄！真是太疯狂了！我复制了您的代码并尝试了它，但它对我不起作用！这是废话！
您是否在脚本中加载了 jQuery 库？
是的，Jquery 运行了，但它插入了 img 元素 iwht [object object]，而不是像我在一秒钟前向您展示的实际值。
对不起，伙计。我忘了我与我的网络服务器断开连接，所以它没有上传更改。现在可以了！