使用 jQuery 检索 JSON

Question

我是第一次修改 JSON 数据。我在网上找到的一些示例看起来非常复杂，我无法简化它以便理解该文件。我决定制作一个使用 JSON 数据填充的博客网站。所有文件都在 HTML 文件之外。 JS 文件已正确链接。 JS文件在根目录下的js文件夹中。 index.html 和 blogs.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

我走在正确的轨道上吗？任何意见和建议将不胜感激。

Answer 1

这并不能解决您确切的 jquery 问题（使用克隆），但这是实现我认为您想要做的事情的另一种方法..

test.html（在根文件夹中）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>json/js test stack question</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/test.js"></script>
</head>

<body>

<div class="blog_list">

</div>

</body>
</html>

test.json（在根文件夹中）

{"blogs": [
    {
    "img": "blog1.jpg",
    "title": "My Amazing Journey",
    "author": "David",
    "date": "June 13, 2017",
    "content": "This is some content."
    },
    {
    "img": "blog2.jpg",
    "title": "My Beautiful Journey",
    "author": "David",
    "date": "June 14, 2017",
    "content": "This is some content."
    },
    {
    "img": "blog3.jpg",
    "title": "My Wonderful Journey",
    "author": "David",
    "date": "June 15, 2017",
    "content": "This is some content."
    }
]}

test.js（在根文件夹中的js文件夹中）

$(function() {
    $.getJSON("./test.json", function(json) {
        var opener = '<!-- Blog Start --><div class="blog_post"><div class="blog_panel">';
        var closer = '</div></div><!-- Blog End -->';
        $(json.blogs).each(function() {
            var body = '' +
                '<img class="blog_image" src="folder/' + this.img + '" alt="' + this.title + '">' +
                '<div class="blog_panel_body">' +
                  '<h2 class="blog_title">' + this.title + '</h2>' +
                  '<span class="blog_author_date">' + this.author + ':' + this.date + '</span>' +
                  '<p class="blog_content">' + this.content + '</p>' +
                '</div>'
            ;
            $('.blog_list').append(opener + body + closer);
        })
    });
})

使用 jQuery 检索 JSON

Retrieving JSON using jQuery

jquery

json

getjson