从项目目录访问文件并使用Javascript修改它

Question

我的.json文件与我的html文件位于同一目录中。我想访问这个文件并修改它。这个修改后的文件数据将被用来加载同一个html文件的内容。 如何访问该文件并在Javascript中对其进行修改？ 作为Javascript中的新手，任何帮助表示赞赏。 谢谢。

Answer 1

HTML5添加了一个用于与计算机上的文件进行交互的文件API。

这个HTML5Rocks article解释了如何使用它。

这MDN page也解释了它

HTML

<input type="file" id="input" multiple onchange="handleFiles(this.files)"> 

JS

var inputElement = document.getElementById("input"); 
inputElement.addEventListener("change", handleFiles, false); 
function handleFiles() { 
    var fileList = this.files; /* now you can work with the file list */ 
} 

API link：

FileReader.readAsText() 

Answer 2

你不能仅使用HTML和JavaScript完成此操作。你想要做什么需要读取Web服务器上的文件，而不是从用户的硬盘上读取。因此，您必须使用后端语言，如PHP。这其实很简单。

如果您之前没有使用PHP，您可以测试您有权访问它（除了那些在微软 OS Web服务器上的人）。只要创建一个名为test.php新的文件，并使它看起来像这样：

<?php 
    echo 'Hello there'; 

然后导航到http://whatever_your_domain_is/test.php

---

要访问您的JSON文件，你可以做到这一点的页面正在加载，如下所示：

（1）将页面从.html重命名为.php - 所有这些都允许在页面上处理PHP。否则，它与HTML页面完全相同。

（2）添加部分这样的顶部：

<?php 
    $filePath = "json_file_name.txt"; 
    $handle = fopen($filePath, "r"); 
    $json = fread($handle, filesize($filePath)); 
?> 

（3）后来，在你的JavaScript代码，扑通一声即进入一个变量，像这样：

$(function(){ 

    var imported = "<?php echo $json; ?>"; 
    var json = $.parseJSON(imported); //or, JSON.parse(imported); 

}); //END document.ready 

---

或者，您可以使用AJAX按需执行（即，由用户事件触发，例如按钮点击）。

Here are some examples这表明了AJAX是多么容易。

请注意，使用AJAX不会让您避免后端服务器语言（PHP）。 AJAX代码与后端（PHP）文件进行通信，后者执行与上一节中所述相同的工作，并将结果发送回JavaScript中的AJAX成功函数。AJAX的优势是能够按需要，而不仅仅是最初呈现页面的时间。

---

其他裁判：

how to parse json data with jquery/javascript?