通過 javascript 創(chuàng)建 xmlhttprequest 對象、設(shè)置請求、監(jiān)聽響應(yīng)就緒事件，即可在 html 中讀取文本文件。在實戰(zhàn)案例中，創(chuàng)建文本文件、添加 html 代碼，就能將文本文件內(nèi)容輸出到頁面指定元素中。
在 HTML 中讀取文本文件的簡單指南
引言:
在 HTML 中讀取文本文件對于顯示網(wǎng)頁內(nèi)容或與外部數(shù)據(jù)交互至關(guān)重要。本文將提供一個逐步指南，介紹如何用 JavaScript 輕松讀取文本文件。
代碼塊:
// 創(chuàng)建一個 XMLHttpRequest 對象
const xhr = new XMLHttpRequest();
// 打開一個 GET 請求
xhr.open('GET', 'path/to/textfile.txt', true);
// 設(shè)置請求類型
xhr.setRequestHeader('Content-Type', 'text/plain');
// 監(jiān)聽響應(yīng)就緒事件
xhr.onload = function() {
// 檢查請求狀態(tài)
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲得文本文件內(nèi)容
const text = xhr.responseText;
// 將文本文件內(nèi)容輸出到頁面
document.getElementById('result').innerHTML = text;
}
};
// 發(fā)送請求
xhr.send();
登錄后復(fù)制
實戰(zhàn)案例:
假設(shè)我們有一個名為 content.txt 的文本文件，其中包含以下文本：“Hello World!”。現(xiàn)在，我們想將此文本顯示到具有 HTML 元素 ID 為 result 的網(wǎng)頁中。
步驟:
- 創(chuàng)建一個
content.txt 文件并保存文本“Hello World！”。在 HTML 頁面中添加以下代碼：<div id="result"></div> <script> // 執(zhí)行讀取文本文件的代碼塊 </script>
登錄后復(fù)制
- 在瀏覽器中打開該 HTML 頁面，文本“Hello World!”會顯示在
#result 元素中。結(jié)論:
本指南展示了如何使用 JavaScript 輕松讀取 HTML 中的文本文件。通過遵循這些步驟和示例，你可以輕松地將外部數(shù)據(jù)加載到你的網(wǎng)頁中。
