從json文件獲取數據

我在目錄中有一個名爲「json.json」的json文件。我想從該文件中獲取項目並將其顯示在我現在已經硬編碼的UL中。當我嘗試獲取該文件時，它不起作用。任何人都可以幫我退休並將這些項目添加到json文件中。在此先感謝從json文件獲取數據

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Example</title> 

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 
     <script type = "text/javascript" src = "js/jquery.js"></script> 
     <script type = "text/javascript" src = "js/jquery_ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css">  
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </head> 

    <body> 
     <table id="myTable" class= "table table-bordered"> 
      <tr> 
       <th class="col-md-6 text-center success"> 
        List 1 
       </th> 
       <th class="col-md-6 text-center danger"> 
        List 2 
       </th> 
      </tr> 
      <tr>  
       <td class="col-md-6"> 
        <ul id="firstlist"> 
         <li>Apple <img id="Apple" src = "next.jpg" class = "list1"></li> 
         <li>Orange <img id="Orange" src = "next.jpg" class = "list1"></li> 
         <li>Avacado <img id="Avacado"src = "next.jpg" class = "list1"></li> 
         <li>Banana <img id="Banana" src = "next.jpg" class = "list1"></li> 
         <li>Mango <img id="Mango" src = "next.jpg" class = "list1"></li> 
        <ul>  
       </td> 
       <td class="col-md-6"> 
        <ul class = "seclist" id = "seclist"></ul> 
       </td> 
      </tr> 
     </table> 

     <script>   
      $(function(){ 
       $.getJSON('json.json',function(data){ 
        console.log('success'); 
       }).error(function(){ 
        console.log('error'); 
       }); 
      }); 
     </script> 
    </body> 
</html>

我創建的JSON文件是這樣的：

{"Fruits":[ 
    {"textToBeDisplayed":"Apple"}, 
    {"textToBeDisplayed":"Orange"}, 
    {"textToBeDisplayed":"Avacado"}, 
    {"textToBeDisplayed":"Banana"}, 
    {"textToBeDisplayed":"Mango"}, 
]}

來源

2014-07-25 Vithushan

您需要的JSON數組賦值給一個變量。 LittleDragon的建議是正確的，但你需要使用這樣的：

var fruits = {"Fruits":[ 
    {"textToBeDisplayed":"Apple"}, 
    {"textToBeDisplayed":"Orange"}, 
    {"textToBeDisplayed":"Avacado"}, 
    {"textToBeDisplayed":"Banana"}, 
    {"textToBeDisplayed":"Mango"}, 
]};

，然後只需添加<script src="json.json"></script>您的網頁上，那麼你可以使用JavaScript訪問成果JSON數組。

這裏有一個小提琴給你：http://jsfiddle.net/ar37G/

來源

2014-07-25 10:52:21 Brunis

的文件名應該是在引號作爲一個字符串：

$.getJSON('json.json', function(data){ 
    console.log('success'); 
}).error(function(){ 
    console.log('error'); 
});

另外請注意，你不能讓一個AJAX請求到本地文件系統 - 它將被瀏覽器的安全阻止。您需要向Web服務器發出請求，可以是本地（WAMP/LAMP/IIS等）或遠程。

來源

2014-07-25 08:00:59

抱歉，忘了更改。我也嘗試過。我刪除了引號，以檢查它是否可以在沒有引號的情況下工作，並在不改變它的情況下進行復制抱歉。它不能以任何方式工作 – Vithushan

這是對本地文件系統的請求，還是您正在使用Web服務器？ –

本地。該json文件位於該文件所在的文件夾中 – Vithushan

這裏是在頁頭的方式

$.getJSON('json.json', function(data){ 

var items = []; 
    $.each(data, function(key, val) { 
    items.push("<li id='" + key + "'>" + val + "</li>"); 
    }); 

$("<ul/>", { 
    "class": "my-new-list", 
    html: items.join("") 
    }).appendTo("body"); 


});

來源

2014-07-25 08:03:31 LittleDragon

它沒有標識json文件。在控制檯中它說錯誤。這就是我現在面臨的問題 – Vithushan

你也可以發佈錯誤嗎？ – LittleDragon

我正在嘗試這一點。根據這一點，說錯誤在控制檯上 $ .getJSON（ 'json.json'，函數（數據）{ \t \t \t \t \t的console.log（ '成功'）; \t \t \t \t}）錯誤（函數（）{ \t \t \t \t \t的console.log（ '錯誤'）; \t \t \t \t}）; – Vithushan

你應該定義該

<script src="json.json"></script>

來源

2014-07-25 08:17:49 LittleDragon

我也試過。它沒有工作。 – Vithushan

絕對無關 – RiggsFolly

上面提到的用戶之一，當我嘗試從本地目錄調用它時不會。所以希望是正確的... – Vithushan

從json文件獲取數據

回答

相關問題