从JSON文件中检索数据并在库中显示图像
我是JQuery的新手，非常感谢任何帮助。
“使用$ .getJSON函数，检索所提供的items.json文件中的数据，并在下面的图库中显示图像。图库应以大致缩略图大小显示每个图像，其标题位于桌面分辨率下的3列网格中“。
我能够在HTML页面上输出.json，现在我想知道如何在HTML页面上显示实际图像而不是图像的URL路径？ 这是当前输出到HTML页面的内容：
- url：images / image_1.jpg
-
标题：图片1标题
-
url：images / image_2.jpg
-
标题：图片2标题
-
url：images / image_3.jpg
-
标题：图片3标题
-
url：images / image_4.jpg
- 标题：图片4标题
items.json
{ "items": [ { "url": "images/image_1.jpg", "caption": "Image 1 Caption" }, { "url": "images/image_2.jpg.jpg", "caption": "Image 2 Caption" }, { "url": "images/image_3.jpg.jpg", "caption": "Image 3 Caption" }, { "url": "images/image_4.jpg.jpg", "caption": "Image 4 Caption" } ] }
scripts.js中
$(document).ready( function(){ $.getJSON('images.json', function(data) { $.each(data.items, function(i,f) { $("ul").append("URL: "+f.url+" Caption: "+f.caption+"
"); }); }); });
试试这个：
$.getJSON('items.json', function(data) { $.each(data.items, function(i,f) { $("ul").append("URL: "http://sofzh.miximages.com/jquery/+f.url+" Caption: "+f.caption+"
"); }); });
只是显示img的更新;
$.getJSON('js/ads.json', function (data) { $.each(data.items, function (i, f) { $("ul").append("URL: " http://sofzh.miximages.com/jquery/+ f.url + " 
"); }); });
如果你想只显示img使用这个（我使用div与id="images" ）
$(document).ready(function() { $.getJSON('items.json', function(data) { $.each(data.items, function(i, f) { $("#images").append("
"); }); }); });