我对如何使用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);
});
但它对我不起作用。提前感谢您的帮助！
<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>
输出是两个图像转换为具有imgResult ID 的DIV。
JSFiddle Demo