HTML でテキスト ファイルを読み取るための簡単なガイド

JavaScript を使用して XMLHttpRequest オブジェクトを作成し、リクエストを設定し、HTML 内のテキスト ファイルを読み取るための応答準備完了イベントをリッスンします。実際には、テキスト ファイルを作成し、HTML コードを追加することで、テキスト ファイルの内容をページ上の指定した要素に出力できます。

#HTML でテキスト ファイルを読み取るための簡単なガイド

はじめに:HTML の読み取りについてテキスト ファイルは、Web ページのコンテンツを表示したり、外部データを操作したりするために不可欠です。この記事では、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 を持つ Web ページに表示したいとします。

content.txt
1. ファイルを作成し、テキスト「Hello World!」を保存します。 次のコードを HTML ページに追加します。

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

   ログイン後にコピー
   ブラウザで HTML ページを開くと、## に「Hello World!」というテキストが表示されます。 ##結果
   要素。
   3. #結論:

   このガイドでは、JavaScript を使用して HTML 内のテキスト ファイルを簡単に読み取る方法を説明します。これらの手順と例に従うことで、外部データを Web ページに簡単に読み込むことができます。

   以上がHTML でテキスト ファイルを読み取るための簡単なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。