dongsuishou8039
2016-10-05 10:12
浏览 575

如何读取本地JSON文件

I am following a tutorial on YouTube but I couldn't make it run. Basically I have a country.json file.and I am trying to retrieve data inside it. What is wrong here??

This is how country.json file looks like

{
  "name": "Germany",
  "capital": "Berlin",
  "pop": "some value"
}

JavaScript

var container = $("div.container");
$("input#get").click(function () {
  $.ajax({
    type: "Get",
    url: "country.json",
    dataType: "json",
    successs: function (data) {
      $.each(data, function (index, item) {
        $.each(item, function (key, value) {
          container.append(key + " : " + value + "</br>");
        });
        container.appendChild("<br/><br>")
      });
    }
  });
});

HTML

<div class="container"></div>
<div id="form-area">
  <h2>Get</h2>
  <input type="submit" id="get" value="get">
</div>

图片转代码服务由CSDN问答提供 功能建议

我正在关注YouTube上的教程,但我无法让它运行。 基本上我有一个 country.json 文件。我正在尝试检索其中的数据。 这里有什么问题?

这就是 country.json 文件的样子

  {
  “名称”:“德国”,
“资本”:“柏林”,
“pop”:“某些值”
} 
   
 
 

JavaScript < / p>

  var container = $(“div.container”); 
 $(“input#get”)。click(function(){
 $ .ajax({\  n类型:“获取”,
 url:“country.json”,
 dataType:“json”,
成功:函数(数据){
 $ .each(数据,函数(索引,项目){\  n $ .each(item,function(key,value){
 container.append(key +“:”+ value +“&lt; / br&gt;”); 
}); 
 container.appendChild(“&lt;  ; br /&gt;&lt; br&gt;“)
}); 
} 
}); 
}); 
   
 
 

HTML

 &lt; div class =“container”&gt;&lt; / div&gt; 
&lt; div id =“form-area”&gt; 
&lt; h2&gt;获取&lt; / h2&gt;  
&lt; input type =“submit”id =“get”value =“get”&gt; 
&lt; / div&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongluanban3536 2016-10-05 10:38
    已采纳

    You can get it like this:-

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    
    </head>
    <body>
    <div class="container"></div>
    <div id="form-area">
        <h2>Get</h2>
        <input type="submit" id="get" value="get">
    </div>
    </body>
    </html>
    
     <script type="text/javascript">
    var container = $(".container"); //check change here
    $("#get").click(function () { //check change here
        $.getJSON( "country.json", function( data ) {
           var myhtml = ''; // create an empty variable
            $.each(data, function (key, value) {
                myhtml += key + ' : ' + value + '</br>'; // append data to variable
    
            });
          container.append( myhtml); // append the whole data (variable) to div
        });
    });
    </script>
    

    Output (on my local browser):- http://prntscr.com/cq2jjt

    Note:- to read data from json file $.getJSON() is required.

    Check more detail:- http://api.jquery.com/jquery.getjson/

    打赏 评论
  • dongzhi4073 2016-10-05 10:17

    You need https:\\ to run the Ajax, Simply in local file it will not work. Specially in Chrome. Use the Apache server in your machine and add all your file. And run the application through localhost. Ajax call will fire. Before to that, Try the same application in Firefox one. Firefox might do the ajax locally.

    打赏 评论
  • doufubian3479 2016-10-05 10:30

    we can acheive this by using jquery library..

    $.getJSON( "ajax/country.json", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
           items.push( "<li id='" + key + "'>" + val + "</li>" );
      });
      $('#form-area').html(items.join(""));
    });
    
    打赏 评论

相关推荐 更多相似问题