Rumah > hujung hadapan web > html tutorial > Panduan ringkas untuk membaca fail teks dalam HTML

Panduan ringkas untuk membaca fail teks dalam HTML

PHPz
Lepaskan: 2024-04-09 16:21:02
asal
861 orang telah melayarinya

Buat objek XMLHttpRequest, tetapkan permintaan dan dengar acara sedia respons melalui JavaScript untuk membaca fail teks dalam HTML. Dalam kes praktikal, dengan mencipta fail teks dan menambah kod HTML, kandungan fail teks boleh dikeluarkan kepada elemen yang ditentukan pada halaman.

在 HTML 中读取文本文件的简单指南

Panduan ringkas untuk membaca fail teks dalam HTML

Pengenalan:
Membaca fail teks dalam HTML adalah penting untuk memaparkan kandungan halaman web atau berinteraksi dengan data luaran. Artikel ini akan menyediakan panduan langkah demi langkah tentang cara membaca fail teks dengan mudah menggunakan JavaScript.

Blok kod:

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

Kes praktikal:

Andaikan kita mempunyai fail teks bernama content.txt yang mengandungi teks berikut: "Hello World!". Sekarang, kami mahu memaparkan teks ini ke dalam halaman web dengan ID elemen HTML hasil. content.txt 的文本文件,其中包含以下文本:“Hello World!”。现在,我们想将此文本显示到具有 HTML 元素 ID 为 result 的网页中。

步骤:

  1. 创建一个 content.txt 文件并保存文本“Hello World!”。
  2. 在 HTML 页面中添加以下代码:
<div id="result"></div>
<script>
  // 执行读取文本文件的代码块
</script>
Salin selepas log masuk
  1. 在浏览器中打开该 HTML 页面,文本“Hello World!”会显示在 #result
Langkah:

  1. Buat fail content.txt dan simpan teks "Hello World!".

  • Tambah kod berikut dalam halaman HTML:

    rrreee

    1. Buka halaman HTML dalam penyemak imbas, teks "Hello World!" hasil elemen. 🎜🎜🎜Kesimpulan:🎜🎜🎜Panduan ini menunjukkan cara mudah membaca fail teks dalam HTML menggunakan JavaScript. Dengan mengikuti langkah dan contoh ini, anda boleh memuatkan data luaran dengan mudah ke dalam halaman web anda. 🎜
  • Atas ialah kandungan terperinci Panduan ringkas untuk membaca fail teks dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan