使用jQuery檢索JSON

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

我在正確的軌道上嗎？任何意見和建議將不勝感激。

來源

2017-06-16 DavidG

從你的'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

這並沒有解決您的具體問題的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); 
     }) 
    }); 
})

來源

2017-06-16 01:42:36

是的，這工作。謝謝。它可能是在json路徑中的「./」 – DavidG

我認爲我有文件夾structyre重新創建完全與你現在和即時通訊使用./在文件夾路徑。虐待更新答案，以顯示我的文件夾和文件設置.. –

@DavidG我更新了我的工作的答案。我不認爲我有時間玩你的.clone方法做事情，因爲我沒有過分熟悉它，但今晚晚些時候可能會用它練習。讓我知道你是否可以爲你工作。 –

使用jQuery檢索JSON

回答

相關問題