我第一次修改JSON数据。我在网上找到的一些例子看起来非常复杂,我无法简化它,以便我能理解文件。我决定创建一个使用JSON数据填充它的博客网站。所有文件都在HTML文件外部。 JS文件已正确链接。 JS文件位于根目录的js文件夹中。 index.html和blogs.json位于根目录中。使用jQuery检索JSON
这里的HTML:
<div class="blog_list"> <!-- Div to hold populated blogs -->
<!-- Blog Start -->
<div class="blog_post">
<div class="blog_panel">
<img class="blog_image" src="" alt="">
<div class="blog_panel_body">
<h2 class="blog_title"></h2>
<span class="blog_author_date"></span>
<p class="blog_content">
</p>
</div>
</div>
</div>
<!-- Blog End -->
</div>
这里的外部JSON数据:
{
"blogs": [
{
"img": "<img class=\"image\" src=\"img/image.jpeg\" alt=\"Sample image 1\" />",
"title": "My Amazing Journey",
"author": "David",
"date": "June 13, 2017",
"content": "This is some content."
},
{
"img": "<img src=\"img/image.jpeg\" alt=\"Sample image 2\" />",
"title": "My Beautiful Journey",
"author": "David",
"date": "June 14, 2017",
"content": "This is some content."
},
{
"img": "<img src=\"img/image.jpeg\" alt=\"Sample image 3\" />",
"title": "My Wonderful Journey",
"author": "David",
"date": "June 15, 2017",
"content": "This is some content."
}]
}
这里是我的外部JS文件:
$("document").ready(function() {
$.getJSON("./blogs.json"), function(json) {
json.blogs.forEach(function(blog) {
var newBlog = $('body').find(".blog_post").clone();
$(newBlog).find(".blog_image").html(blog.img);
$(newBlog).find(".blog_title").append(blog.title);
$(newBlog).find(".blog_author_date").append("Written by: " + blog.author + " on " + blog.date);
$(newBlog).find(".blog_content").append(blog.content);
});
};
});
控制台显示的错误:
XML Parsing Error: not well-formed Location: file:///Users/David/Site/Website%20Template/blogs.json Line Number 1, Column 1: blogs.json:1:1
我在正确的轨道上吗?任何意见和建议将不胜感激。
从你的'blogs.json'文件删除'JSON =',它应该工作 – BravoZulu
这并修正语法错误。现在控制台显示:XML解析错误:格式不正确 位置:file:///Users/David/Sites/Website%20Template/blogs.json 行号1,列1:blogs.json:1:1 – DavidG
我想你需要配置你的web服务器的'mime.types'文件,以便为'.json'扩展名返回MIME类型'application/json'。 – Barmar