Question

我有一个HTML按钮，当我按下按钮时，我想使用JavaScript更改P标签的内容。内容位于.txt文件中（与我的html文件位于同一文件夹中，称为“ myText1.txt”）。我该如何获取该内容并将其保存在一个名为fileText的变量中，所以我只能使用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>

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

Answer 2

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

alerts

这只是一个简单的示例。错误处理和const animals = { "types": [ { "id": "1", "tags": ["cat"] }, { "id": "2", "tags": ["dog"] }, { "id": "3", "tags": ["cat", "bird", "dog"] }, { "id": "4", "tags": [] }, { "id": "5", "tags": ["cat", "bird"] }, ], }; // Flatten all tags into single array var allTags = [].concat( ...animals.types.map( (type) => type.tags ) ); // Count each tag const tagsCount = {}; allTags.forEach( (tag) => tagsCount[tag] = tagsCount[tag] ? tagsCount[tag] + 1 : 1 ) // Handle tag count as you need const app = document.querySelector('#app'); app.innerHTML = Object.keys(tagsCount).map((key) => { return `<p>${key}: ${tagsCount[key]}</p>` }).join('');应该进行修改以满足您的需求。还请注意，那里有很多可以简化AJAX工作流程的库。

Answer 3

使用ajax创建具有适当成功/失败处理程序的XMLHttpRequest实例，并将请求类型设置为"GET"。这是一个完整的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>load text file</title>
  </head>
  <body>
    <button id="btn_change" onclick="changeTxt()">OK</button>
    <br>
    <p id="content"></p>

    <script>

    function changeTxt() {
      var request = new XMLHttpRequest();
      request.onreadystatechange = () => {
        if (request.readyState === 4) {
          if (request.status === 200) {
            document.getElementById("content").innerText = request.responseText;
          }
          else {
            console.log(request.responseText);
          }
        }
      };
      request.open("get", "myText1.txt");
      request.send();
    }

    </script>
  </body>
</html>

请注意，这需要一台活动的服务器，因此，如果您在本地计算机上运行此服务器，请使用python -m http.server或类似的命令来启动服务器，并在浏览器中导航到localhost。路径字符串假定文本文件位于同一文件夹中。

此外，如果您要处理许多Ajax请求，请考虑创建一个辅助函数来设置这些请求，因为它有点冗长。 jQuery是执行ajax请求的另一种选择，它可以节省几行代码，但是如果您只是这样做，you might not need it。

我如何使用JavaScript读取.txt文件并在HTML中使用其内容

3 个答案: