Un guide simple pour lire des fichiers texte en HTML

Créez un objet XMLHttpRequest, définissez la requête et écoutez l'événement de réponse prêt via JavaScript pour lire les fichiers texte au format HTML. Dans un cas pratique, en créant un fichier texte et en ajoutant du code HTML, le contenu du fichier texte peut être affiché vers l'élément spécifié sur la page.

Un guide simple pour lire des fichiers texte en HTML

Introduction :
La lecture de fichiers texte en HTML est essentielle pour afficher le contenu d'une page Web ou interagir avec des données externes. Cet article fournira un guide étape par étape sur la façon de lire facilement des fichiers texte avec JavaScript.

Bloc de code :

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

Cas pratique :

Supposons que nous ayons un fichier texte nommé content.txt qui contient le texte suivant : "Hello World !". Maintenant, nous voulons afficher ce texte dans une page Web avec l'ID d'élément HTML result. content.txt 的文本文件，其中包含以下文本：“Hello World!”。现在，我们想将此文本显示到具有 HTML 元素 ID 为 result 的网页中。

步骤:

1. 创建一个 content.txt 文件并保存文本“Hello World！”。
2. 在 HTML 页面中添加以下代码：

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

3. 在浏览器中打开该 HTML 页面，文本“Hello World!”会显示在 #result

Étapes :

1. Créez un fichier content.txt et enregistrez le texte "Hello World !".

Ajoutez le code suivant dans la page HTML :

rrreee

3. Ouvrez la page HTML dans le navigateur, le texte "Hello World !" élément result. 🎜🎜🎜Conclusion :🎜🎜🎜Ce guide montre comment lire facilement des fichiers texte en HTML à l'aide de JavaScript. En suivant ces étapes et exemples, vous pouvez facilement charger des données externes dans vos pages Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!