Javascript 如何读取本地JSON文件_Javascript_Php_Jquery_Json

Javascript 如何读取本地JSON文件

javascript php jquery json

Javascript 如何读取本地JSON文件,javascript,php,jquery,json,Javascript,Php,Jquery,Json,我正在关注YouTube上的一个教程，但我无法运行它。基本上，我有一个country.json文件，我试图检索其中的数据。这里怎么了这就是country.json文件的外观 { "name": "Germany", "capital": "Berlin", "pop": "some value" } JavaScript var container = $("div.container"); $("input#get").click(function () { $.ajax(

我正在关注YouTube上的一个教程，但我无法运行它。基本上，我有一个

country.json

文件，我试图检索其中的数据。这里怎么了

这就是

country.json

文件的外观

{
  "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>")
      });
    }
  });
});

var container=$（“div.container”）；
$（“输入#获取”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“country.json”，
数据类型：“json”，
成功：功能（数据）{
$。每个（数据、功能（索引、项目）{
$。每个（项目、功能（键、值）{
container.append（key+”：“+value+”
”；
});
container.appendChild（“

”）
});
}
});
});

HTML


收到

您需要

https:\\

来运行Ajax，只是在本地文件中它不会工作。特别是铬。在您的计算机中使用

Apache服务器

，并添加所有文件。并通过

localhost

运行应用程序。Ajax调用将启动。在此之前，请在Firefox one中尝试相同的应用程序。Firefox可能会在本地运行ajax。

您需要

https:\\

来运行ajax，只是在本地文件中它不会工作。特别是铬。在您的计算机中使用

Apache服务器

，并添加所有文件。并通过

localhost

运行应用程序。Ajax调用将启动。在此之前，请在Firefox one中尝试相同的应用程序。Firefox可能在本地执行ajax。

我们可以通过使用jquery库实现这一点

$.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(""));
});

$.getJSON（“ajax/country.json”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
$（'#form area'）.html（items.join（“”）；
});

我们可以通过使用jquery库来实现这一点

$.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(""));
});

$.getJSON（“ajax/country.json”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
$（'#form area'）.html（items.join（“”）；
});

您可以这样获得：-

<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>


标题
收到
var container=$（“.container”）//在这里找钱
$（“#get”）。单击（函数（）{//在此处检查更改
$.getJSON（“country.json”，函数（数据）{
var myhtml=''；//创建一个空变量
$。每个（数据、函数（键、值）{
myhtml+=key+'：'+value+'
'；//将数据追加到变量
});
container.append（myhtml）；//将整个数据（变量）追加到div
});
});

输出（在本地浏览器上）：-

注意：-要从json文件

$读取数据，需要getJSON（）

查看更多详细信息：-

您可以这样获得它：-

<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>


标题
收到
var container=$（“.container”）//在这里找钱
$（“#get”）。单击（函数（）{//在此处检查更改
$.getJSON（“country.json”，函数（数据）{
var myhtml=''；//创建一个空变量
$。每个（数据、函数（键、值）{
myhtml+=key+'：'+value+'
'；//将数据追加到变量
});
container.append（myhtml）；//将整个数据（变量）追加到div
});
});

输出（在本地浏览器上）：-

注意：-要从json文件

$读取数据，需要getJSON（）

查看更多详细信息：-

数据类型不是mime类型吗？我总是使用

数据类型：“application/json”

。也要使用文件的完整url，但要小心，该文件必须位于公共目录中。数据类型不是mime类型吗？我总是使用

数据类型：“application/json”

。还要使用文件的完整url，但要小心，该文件必须位于公共目录中。@aliak很高兴为您提供帮助。：）@阿利亚克很高兴能帮助你。：）