从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文件获取数据

回答

相关问题