从文本文件中读取数据并将其嵌入到 HTML 网页中。如何？答案

【问题标题】：Read data from a text file and embed it to an HTML webpage . How?从文本文件中读取数据并将其嵌入到 HTML 网页中。如何？
【发布时间】：2026-01-01 14:05:02
【问题描述】：

我有一个这样的 HTML 文件..

<html>
<body>
<table border="1" cellpadding="5">
<tr>
<td>Some Fixed text here</td>
<td id="data">---here data as per values in external text file---</td>
</tr>
</table>
</html>

现在我在 index.html 文件的同一目录中有一个文本文件 data.txt。

我必须使用一些脚本读取文本文件，并根据文本文件的第一个字符中的值将固定的 innerHTML 放入 id=data 中.

如

对于第一个字符中的 0，innerHTML=<div style="color:red; border:2px dotted blue;">Alpha</div>

对于第一个字符中的 1，innerHTML=<div>Beta</div>

对于第一个字符中的 2，innerHTML=<div>Gamma<span>more text</span></div>

等等……

我发现了各种使用 jquery、ajax 的脚本。我尝试了这些，但它们对我不起作用。由于我对这些技术知之甚少，因此我找不到问题所在。任何人都可以帮助我使用 javascript 或类似工具制作脚本吗？

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

纯文本文件的jQuery解决方案，检查文件中文本的第一个字符：

$( function(){
    $.ajax({
        url: 'data.txt',
        type: 'get',
        success: function(data) {
            if (data.substr(0,1) == 0)
                {$("#data").html('<div style="color:red; border:2px dotted blue;">Alpha</div>');}
            if (data.substr(0,1) == 1)
                {$("#data").html('<div>Beta</div>');}
        },
    });
});

您只需添加所有其他要检查的条件。

编辑：

以防万一你不知道，如果你使用 jQuery 代码，你必须将它添加到你的 html 文档中。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

【讨论】：

【解决方案2】：

将文本加载并存储到 JavaScript 中的 var 中：

var text = new XMLHttpRequest();
text.open('GET', '/data.txt');
text.onreadystatechange = function() {
  alert(text.responseText);
}
text.send();

或使用 PHP 加载到页面中（恕我直言）：

<div><p><?php include('data.txt'); ?></p></div>

【讨论】：