用JSON和JQuery構建博客

我有這個項目用JSON/HTML/CSS/LESS構建基於jQuery的博客& Javascript。用JSON和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。

來源

2016-11-07 F.Kraemer

$.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的$就法

來源

2016-11-07 14:34:33

這工作，我成功地加載我的JSON文件，但我有一個意外的屬性（P）在控制檯中，我不明白爲什麼...我現在已經瞭解到，我應該使用append來創建div，但是我應該能夠在JSON文件中編寫一個新的「」博客文章「，然後它會自動將它加載到頁面中，而這個我沒有任何線索如何做。對不起，我吸編程:( –

@我摔一隻熊 –

我的錯誤「名稱」應該是「P」..感謝捕捉，我更新了答案 –

功能從文件中讀取內容應該看起來像：

$.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); 
     }); 
    });

來源

2016-11-07 14:33:07

-1

是您的要求使用jQuery還是確定你使用的框架如AngularJS？你可以通過聲明包含你的HTML代碼的變量，然後使用$（「＃yourdiv」）。html（）把你的變量的內容放到你的佈局中來使用jQuery。但這一切都取決於您的要求，有很多框架可以幫助您解決這個問題。例如。 AngularJS，KnockoutJS等，其中你的HTML佈局綁定到您的JavaScript - 使用MVVM技術。

AngularJS：https://angularjs.org/
KnockoutJS：http://knockoutjs.com/

然後這個問題，是JSON存儲在文件系統中的服務器上，如果這是你需要某種形式的API無論如何的情況下，可以訪問JSON或者打開服務器來訪問文件。

JQuery和所有的JavaScript框架將需要以某種方式連接到您的服務器，因爲你寫它是一個博客，你試圖在這裏編碼。

來源

2016-11-07 14:33:12

問題是標籤的jQuery。沒有角標籤。不要告訴人們無緣無故地使用庫...... –

嗯......我絕對不同意你的觀點......首先，我問是否有使用jquery的需求......另一件事是。 jquery使得很難保持由jquery生成的html佈局...醜陋的代碼，對每個人來說都不是真正可讀的。所以，對我來說，推薦圖書館，這使我們的生活更輕鬆，是不言自明的。特別是在創建博客時，博客會隨着時間而改變（至少在大多數情況下，設計更改......）。如果js包含生成html的代碼片段，它可能是一個艱鉅的任務來改變它... –

用JSON和JQuery構建博客

回答

相關問題