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

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

javascript html

Javascript 如何将.txt文件中的数据插入html,javascript,html,src,Javascript,Html,Src,我想将文本文件中的数据插入html。我该怎么做？我的代码有问题吗。我只知道文本文件的路径。谢谢 document.getElementById("description").src = "/bestreads/books/alannathefirstadventure/description.txt"; 您需要先“读取”文件，如果使用Jquery，可以执行以下操作： $.get("bestreads/books/alannathefirstadventure/description.txt"

我想将文本文件中的数据插入html。我该怎么做？我的代码有问题吗。我只知道文本文件的路径。谢谢

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

您需要先“读取”文件，如果使用Jquery，可以执行以下操作：

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

您需要先“读取”文件，如果使用Jquery，可以执行以下操作：

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

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

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

在上述代码中，

数据

将包含指定文本文件中的全部内容。

请验证文本文件的位置，因为这是程序员经常犯的错误。

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

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

在上述代码中，

数据

将包含指定文本文件中的全部内容。

请验证文本文件的位置，因为这是程序员经常犯的错误。

可能值得一提的是，使用纯html的方法可以实现这一点

你应该能做到

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

但是，css不会应用于文本

也许值得一提的是，使用纯html的方式来实现这一点

你应该能做到

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

但是，css不会应用于文本

您可以使用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.
});

然后您可以使用：

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

对象的更多信息

关于

innerHTML

，。