从文本文件中读取数据并将其嵌入到 HTML 网页中。如何？
Posted
技术标签:
【中文标题】从文本文件中读取数据并将其嵌入到 HTML 网页中。如何？【英文标题】：Read data from a text file and embed it to an HTML webpage . How? 【发布时间】：2019-10-05 16:09:07 【问题描述】：我有一个这样的 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 或类似工具制作脚本吗？
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于从文本文件中读取数据并将其嵌入到 HTML 网页中。如何？的主要内容，如果未能解决你的问题，请参考以下文章
创建一个从数据馈送中读取文本文件并将其转换为 php 的目标文件的函数
我正在尝试从文本文件数据中提取并将其添加到音频读取函数 Matlab