通過 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 的網頁中。
步驟:
- 創建一個
content.txt 文件并保存文本“Hello World！”。在 HTML 頁面中添加以下代碼：<div id="result"></div> <script> // 執行讀取文本文件的代碼塊 </script>
登錄后復制
- 在瀏覽器中打開該 HTML 頁面，文本“Hello World!”會顯示在
#result 元素中。結論:
本指南展示了如何使用 JavaScript 輕松讀取 HTML 中的文本文件。通過遵循這些步驟和示例，你可以輕松地將外部數據加載到你的網頁中。
