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