如何使用 javascript 读取 .txt 文件并在 HTML 中使用其内容答案

【问题标题】：How can i read a .txt file using javascript and use its content in HTML如何使用 javascript 读取 .txt 文件并在 HTML 中使用其内容
【发布时间】：2019-01-19 17:38:20
【问题描述】：

我有一个 HTML 按钮，当我按下它时，我想使用 javascript 更改 P 标签的内容。内容位于 .txt 文件中（在与我的 html 文件相同的文件夹中称为“myText1.txt”）。如何获取该内容并将其保存在名为 fileText 的 var 中，这样我就可以使用 document.getElementById("txt_nombre").innerHTML = fileText;

<button id="btn_change" onclick="changeTxt()">OK</button>
<br>
<p id="content"></p>

<script>

function changeTxt() {
    var fileText;
    document.getElementById("content").innerHTML = fileText;
}

</script>

</body>

【问题讨论】：

如果我正确理解你的问题，你就不能那样做。您的 javascript 在客户端计算机上运行，而您的文本文件在服务器中。 javascript不能直接从服务器读取文件，除非你使用ajax从服务器获取内容。
这可能对stackoverflow.com/questions/14446447/…有帮助。
@bansi 那么为什么 ajax 不是一个可以接受的解决方案呢？
How to read a local text file?的可能重复

标签： javascript html file text

【解决方案1】：

没有 AJAX 的不同方法，不确定它是否适用于您的情况。

你的文本文件内容是这样的（文件名可以是 content.txt 或 content.js 什么的）

var fileText = "Some text. Lorem ipsum";

通过脚本标签将此文件添加到您的页面

<script type="text/javascript" src="content.txt"></script>

在您的按钮单击功能中使用以下代码

document.getElementById("txt_nombre").innerHTML = fileText;

【讨论】：

您还应该强调，要使其正常工作，文件的格式必须为 var foo = ..，因此是 javascript 文件 - 它不适用于无法更改为 javascript 的常规文本文件格式。
@eis .txt 文件应该可以正常工作吗？我对带有 JavaScript 内容的 .php 文件使用了类似的方法。
是的。正如@eis 所提到的，该文件应该具有正确语法的有效 JavaScript 内容。

【解决方案2】：

您应该可以使用AJAX 执行此操作。以下是从链接文章修改的

<button id="btn_change">OK</button>
<br>
<p id="content"></p>

<script>

(function() {
   var httpRequest;
   //Set an event listener on your button
   document.getElementById("btn_change").addEventListener('click', makeRequest);

   function makeRequest() {
      httpRequest = new XMLHttpRequest();

      if (!httpRequest) {
          alert('Giving up :( Cannot create an XMLHTTP instance');
          return false;
      }

      httpRequest.onreadystatechange = setContents;
      //Open then send the request to your page
      httpRequest.open('GET', 'myText1.txt');
      httpRequest.send();
   }

   function setContents() {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
       if (httpRequest.status === 200) {
        //Set the contents of your p tag
         document.getElementById("content").innerHTML = httpRequest.responseText;
       } else {
         alert('There was a problem with the request.');
       }
    }
 }
})();    
</script>    
</body>

这只是一个简单的例子。应修改错误处理和alerts 以满足您的需要。另请注意，有很多库可以简化 AJAX 工作流程。

【讨论】：