使用 jQuery 检索 JSON答案

【问题标题】：Retrieving JSON using jQuery使用 jQuery 检索 JSON
【发布时间】：2017-06-16 01:03:02
【问题描述】：

我是第一次修改 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

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

【问题讨论】：

从你的blogs.json文件中删除json =，它应该可以工作
这确实修复了语法错误。现在控制台显示： XML Parsing Error: not well-formed Location: file:///Users/David/Sites/Website%20Template/blogs.json Line Number 1, Column 1: blogs.json:1:1
我认为您需要配置网络服务器的 mime.types 文件，以便它为 .json 扩展返回 MIME 类型 application/json。
@Barmar 我将设置 Web 服务器来尝试。我在 mac 上从 finder 运行。
我不确定 finder 是什么，但你试过在 Firefox 中运行它吗？ stackoverflow.com/questions/21507816/…

标签： jquery json getjson

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

【讨论】：

是的，这行得通。谢谢。会不会是json路径中的“./”
我想我已经完全按照您现在的方式重新创建了 structyre 文件夹，并且我在文件夹路径中使用了 ./。生病更新答案以显示我的文件夹和文件设置..
@DavidG 我用我必须工作的东西更新了答案。我想我没有时间玩你的 .clone 做事方法，因为我不太熟悉它，但今晚晚些时候可能会用它来练习。让我知道你是否可以让它为你工作。
这对我来说已经足够好了。我在网上的某个地方找到了该代码，但我并没有与之结婚，哈哈。谢谢您的帮助。让我知道是否有任何原因表明为什么 clone() 在那里。我认为这是复制用于保存博客的 HTML，这样可能会简化您的代码。不知道。你的作品！对我来说已经足够好了。感谢您花时间帮助我。
我认为你是对的，使用 .clone 将有助于防止 js 文件因过多的 html 而变得混乱。您可以将模板放入您的 html 中，使用 jquery 克隆它并将 html 保存在 .html 中，将 js 保存在 .js 中。虽然这有点棘手，但我必须考虑将其合并到未来的脚本中，因为我通常使用我在此处的答案中使用的精确、简单的风格。祝你的项目好运。 :)