如何将 .txt 文件中的数据插入 html

Question

我想将文本文件中的数据插入 html。我怎样才能做到这一点？我的代码有什么问题吗？我唯一知道的是文本文件的路径。谢谢

document.getElementById("description").src =  "/bestreads/books/alannathefirstadventure/description.txt";

Answer 1

你需要先"read"文件，如果你使用Jquery，你可以这样做：

$.get("bestreads/books/alannathefirstadventure/description.txt", function(data) {
     document.getElementById("description").src=data;
});

Answer 2

您当前的代码只会打印 bestreads/books/alannathefirstadventure/description.txt 。要将文本文件中的内容打印到您的 html div，您将需要读取文件，在变量中获取其数据并将该变量分配给您的 div 的 src，如下代码所示：

$.get("bestreads/books/alannathefirstadventure/description.txt", function(data) {
     document.getElementById("description").src=data;
});

在上面的代码中，data 将包含指定文本文件中的全部内容。请验证文本文件的位置，这是程序员常犯的错误。

Answer 3

可能值得一提的是使用 object tag

的纯 html 方法

你应该可以做到

<div><object data="/bestreads/books/alannathefirstadventure/description.txt"></object></div>

但是，css 不适用于文本。

Answer 4

您可以使用 JavaScript 和 XMLHttpRequest 对象。

像这样：

声明你的 XHR 函数：

function sendXHR(type, url, data, callback) {
  var newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(type, url, true);
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

那么你可以使用：

sendXHR("GET", "/bestreads/books/alannathefirstadventure/description.txt", null, function(response) { // response contains the content of the description.txt file.
  document.getElementById("description").innerHTML = response; // Use innerHTML to get or set the html content.
});

拜托，您可以找到有关 XMLHttpRequest 对象的更多信息，here。

关于 innerHTML、here。

如何将 .txt 文件中的数据插入 html

How to insert the data from a .txt file into a html

html

javascript

src