Eine einfache Anleitung zum Lesen von Textdateien in HTML

Erstellen Sie ein XMLHttpRequest-Objekt, legen Sie die Anforderung fest und warten Sie über JavaScript auf das Antwortbereitschaftsereignis, um Textdateien in HTML zu lesen. Im praktischen Fall kann durch Erstellen einer Textdatei und Hinzufügen von HTML-Code der Inhalt der Textdatei an das angegebene Element auf der Seite ausgegeben werden.

Eine einfache Anleitung zum Lesen von Textdateien in HTML

Einführung:
Das Lesen von Textdateien in HTML ist für die Anzeige von Webseiteninhalten oder die Interaktion mit externen Daten unerlässlich. In diesem Artikel finden Sie eine Schritt-für-Schritt-Anleitung zum einfachen Lesen von Textdateien mit JavaScript.

Codeblock:

// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 打开一个 GET 请求
xhr.open('GET', 'path/to/textfile.txt', true);

// 设置请求类型
xhr.setRequestHeader('Content-Type', 'text/plain');

// 监听响应就绪事件
xhr.onload = function() {
  // 检查请求状态
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获得文本文件内容
    const text = xhr.responseText;
    
    // 将文本文件内容输出到页面
    document.getElementById('result').innerHTML = text;
  }
};

// 发送请求
xhr.send();

Praktischer Fall:

Angenommen, wir haben eine Textdatei mit dem Namen content.txt, die den folgenden Text enthält: „Hello World!“. Nun möchten wir diesen Text in einer Webseite mit der HTML-Element-ID result anzeigen. content.txt 的文本文件，其中包含以下文本：“Hello World!”。现在，我们想将此文本显示到具有 HTML 元素 ID 为 result 的网页中。

步骤:

1. 创建一个 content.txt 文件并保存文本“Hello World！”。
2. 在 HTML 页面中添加以下代码：

<div id="result"></div>
<script>
  // 执行读取文本文件的代码块
</script>

3. 在浏览器中打开该 HTML 页面，文本“Hello World!”会显示在 #result

Schritte:

1. Erstellen Sie eine content.txt-Datei und speichern Sie den Text „Hello World!“.

Fügen Sie den folgenden Code in die HTML-Seite ein:

rrreee

3. Öffnen Sie die HTML-Seite im Browser, der Text „Hello World!“ wird in # angezeigt. result-Element. 🎜🎜🎜Fazit:🎜🎜🎜Diese Anleitung zeigt, wie Sie Textdateien in HTML mithilfe von JavaScript einfach lesen können. Wenn Sie diese Schritte und Beispiele befolgen, können Sie problemlos externe Daten in Ihre Webseiten laden. 🎜

Das obige ist der detaillierte Inhalt vonEine einfache Anleitung zum Lesen von Textdateien in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!