Javascript 使用JSON和JQuery构建博客

我有一个项目，用JSON/HTML/CSS/LESS&Javascript构建一个基于jQuery的博客

我的问题是，每篇文章都应该来自一个JSON文件，而我不知道如何将它放到实际的博客中

JSON文件：

{ 
    "post1" : {
            "title":  "My day",
            "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
            "date" :  "12/0-16",
            "author" :  "robert",
            "image" :  "../blogg/img.jpg"
    },
    "post2" : {
            "title":  "This right here",
            "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
            "date" :  "12/0-16",
            "author" :  "robert",
            "image" :  "../blogg/img.jpg"
    },
    "post4" : {
            "title":  "Min vackra",
            "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
            "date" :  "12/0-16",
            "author" :  "klara",
            "image" :  "../blogg/img.jpg"
    }
}

我尝试过使用$getJSON方法，但没有任何进展

---

因此，基本上我需要的是将JSON文件中的内容放入index.html中的div中。

从该文件中读取内容的函数应该如下所示：

$.getJSON( "urlToFile.json" )
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        var title = item.title;
        var content = item.content;
        var date = item.date;
        var author = item.author;
        var image = item.image;

        // Here you can create each blog post and add append it into your blog

        // example:
        var title = $("<div/>", {
          "class": "blog-title",
          "text": title
        }).appendTo(container);
      });
    });

---

您需要使用jQuery还是可以使用AngularJS之类的框架？通过声明包含HTML代码的变量，然后使用$yourdiv.HTML将变量的内容放入布局中，基本上也可以使用jQuery实现这一点。但这一切都取决于您的需求，有很多很棒的框架可以帮助您实现这一点。例如AngularJS、KnockoutJS等，您可以使用MVVM技术将HTML布局绑定到javascript

AngularJS： 淘汰赛： 然后问题是，JSON是否存储在服务器上的文件系统中，如果是这种情况，您需要某种API来访问JSON，或者打开服务器来访问文件

JQuery和所有javascript框架都需要以某种方式连接到您的服务器，因为您编写的是一个您试图在这里编写代码的博客

$.ajax({
   dataType: "json",
   url: "myJSONFile.json",
}).done(function(resp){
   for(var p in resp){
     if(!resp.hasOwnProperty(p)) continue;
     var title = resp[p].title;
     var content = resp[p].content;
     // etc...
   }
});

---

使用jquery的$.ajax方法

将问题标记为jquery。没有角度标记。不要无缘无故地告诉人们使用图书馆。。。我绝对不同意你。。。首先，我问是否有使用jquery的要求。。。另一件事是。。。jquery很难维护jquery生成的html的布局。。。丑陋的代码，不是每个人都能读懂。所以，对我来说，推荐图书馆，让我们的生活更轻松，是不言自明的。尤其是在创建博客时，至少在大多数情况下，博客会随着时间而改变，设计也会改变。。。。如果js包含生成html的代码段，那么更改它可能是一项困难的任务…这项工作成功，我成功加载了json文件，但我在控制台中有一个意外的属性p，我不明白为什么。。。我现在已经知道我应该使用append来制作div，但是我应该能够在JSON文件中写一篇新的博客文章，然后它会自动加载到页面中，我不知道该怎么做。对不起，我对编程一窍不通：@我曾经和一只熊摔跤。我的错误名字应该是p。。谢谢你，我更新了答案