在 HTML 中讀取文字檔案的簡單指南

透過 JavaScript 建立 XMLHttpRequest 物件、設定請求、監聽回應就緒事件，即可在 HTML 中讀取文字檔案。在實戰案例中，建立文字檔案、新增 HTML 程式碼，就能將文字檔案內容輸出到頁面指定元素中。

在HTML 中讀取文字檔案的簡單指南

引言:
#在HTML中讀取文字檔案對於顯示網頁內容或與外部資料互動至關重要。本文將提供一個逐步指南，介紹如何用 JavaScript 輕鬆讀取文字檔。

程式碼區塊:

// 创建一个 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();

實戰案例:

假設我們有一個名為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 元素中。

結論:

本指南展示如何使用 JavaScript 輕鬆讀取 HTML 中的文字檔案。透過遵循這些步驟和範例，你可以輕鬆地將外部資料載入到你的網頁中。

以上是在 HTML 中讀取文字檔案的簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！