用Javascript读取本地JSON到HTML

问题描述：

我一直在尝试用纯Javascript（没有JQuery）读取本地JSON文件。我搜索了整个谷歌和Stackoverflow，但似乎没有任何作品在我的情况。我知道JSON.parse，但是如何在Javascript中首先读取文件？用Javascript读取本地JSON到HTML

loadJSON(json){ 
    var savedJSON = JSON.parse(json); 
    alert(savedJSON[0].name); 
}

主要的想法是有一个服务器的网站生成具有用户所保存的信息的JSON，现在我将读取JSON并生成与该信息在Android应用使用HTML，但我在阅读JSON时挣扎着。任何想法？

你的意思是 '本地' 作为本地的同一个网站，或 '本地' 作为你的本地文件系统？请确保您编辑问题以包含您的代码，并准确描述它的错误。 – Clive 2014-09-25 13:21:49

[Loading本地json文件]可能的重复（http://stackoverflow.com/questions/7346563/loading-local-json-file） – user2314737 2014-09-25 13:23:18

我没有使用JQuery，如我的问题中指定的。 – SidneyReis 2014-09-25 13:35:08

答

正如http://www.w3schools.com/json/json_http.asp建议你可以阅读本地（在服务器上），文本文件与XMLHttpRequest

此代码将在HTML表格打印JSON阵列。目录文件file.json的：

[[ 50.65, 5.37 , 4358684.11 ], 
[ 50.68, 5.86 , 1849705.79 ], 
[ 50.33, 6.84 , 961107.46 ], 
[ 50.55, 7.32 , 1587473.93 ]]

HTML/JavaScript的

<script> 
var xmlhttp = new XMLHttpRequest(); 
var url = "file.json"; 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var myArr = JSON.parse(xmlhttp.responseText); 
     myFunction(myArr); 
    } 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function myFunction(arr) { 
    var out = "<table border=1>"; 
    var i; 
    for(i = 0; i < arr.length; i++) { 
     out += "<tr>"; 
     for (j = 0; j < 3; j++) { 
      out += "<td>"+arr[i][j]+"</td>"; 
     } 
     out += "</tr>"; 
    } 
    out += "</table>"; 
    document.getElementById("JSONtable").innerHTML = out; 
} 
</script>

用Javascript读取本地JSON到HTML

相关推荐