dongsuishou8039 2016-10-05 10:12
浏览 702
已采纳

如何读取本地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>
  • 写回答

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/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 高缺失率数据如何选择填充方式
  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件,像网易云音乐,QQ音乐他们的前端和后台部分是用的什么技术实现的?求解!
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!