Affichage d'espace en HTML

Version imprimable

Bonjour à toutes et à tous,

En réponse à un appui sur un bouton, je souhaite afficher des données dans ma page HTML. Mais je voudrais inclure des espaces dans le texte transmis. Je n'y arrive pas. Voilà le contenu de la réponse à la requête :
Code:

1 2 3 server.on("/statut", HTTP_GET, [](AsyncWebServerRequest *request) { // Envoi des statuts courants request->send(200, "text/html", statut0 + "      "+" . . . Signal WiFi : "+ forceWiFi + " dBm"); });
J'ai vu que si on employait les termes "text/html", on retournait bien du texte HTML où   représente un espace insécable.

Pour autant, dans ma page, au lieu d'avoir des espaces, ce sont les termes   qui sont affichés (même résultat avec ou sans la balise b).

Qu'est-ce qui ne va pas ?

Cordialement.

Pierre.

27/02/2025, 12h23
Pytet

Bonjour,

Est-ce que la balise est également affichée tel quel dans le navigateur ? Autrement dit, est-ce que le code html est interprété ?
Tu peux utiliser l'onglet Réseau dans les outils de développement de ton navigateur pour vérifier que l'entête http "Content-type: text/html" est bien prise en compte et que le navigateur considère bien la page comme un document html.

Quel est le résultat affiché dans le code source de la page du navigateur (raccourci Ctrl + U) ?
27/02/2025, 17h31
ChPr

Merci pour cette réponse.

Voici ce qui est affiché dans le navigateur :

Code:

Date et Heure : 27/02/2025 17:06:29 Statut de fonctionnement : Normal       . . . Signal WiFi : -36 dBm

Le code source affiché par Crtl+U est :

Code:

Date et Heure : 0.00&nbsp&nbsp&nbsp&nbsp&nbsp&nbspStatut de fonctionnement : ...

Ce qui est exactement la même chose que ce que j'ai écrit dans mon fichier HTML.

Le résultat de la requête : Normal       . . . Signal WiFi : -36 dBm vient remplacer les trois petits points dans Sta0">...

Dans la partie <head> de mon fichier HTML, je n'avais pas cette ligne : <meta content="text/html; charset=UTF-8" http-equiv="content-type">, mais après l'avoir ajoutée, cela n'a rien changé au résultat.

Avec F12/Réseau/Tout, le type de la requête server.on("/statut" ... est html.

Une idée du problème ?

Cordialement.

Pierre.
27/02/2025, 18h19
Stellar7

Le code affiché n'est pas identique : il manque les ";".
Quelque chose les aurait entre-temps mâchonnés de travers à l'insu de ton plein gré ?
27/02/2025, 20h00
ChPr

Citation:

Envoyé par Stellar7

Le code affiché n'est pas identique : il manque les ";".
Quelque chose les aurait entre-temps mâchonnés de travers à l'insu de ton plein gré ?

Non, les ; n'ont pas été mangés, il faut comparer la fin de :

Code:

Date et Heure : 27/02/2025 17:06:29 Statut de fonctionnement : Normal       . . . Signal WiFi : -36 dBm

avec

Code:

Normal       . . . Signal WiFi : -36 dBm

Cordialement.

Pierre.
27/02/2025, 22h46
Bisûnûrs

Regarder la source (Ctrl+U) ne sert à rien, ça n'affiche pas le résultat d'une requête Ajax, il faut regarder le résultat de la requête dans l'onglet Réseau de l'outil de dev du navigateur.
28/02/2025, 09h50
ChPr

Citation:

Envoyé par Bisûnûrs

Regarder la source (Ctrl+U) ne sert à rien, ça n'affiche pas le résultat d'une requête Ajax, il faut regarder le résultat de la requête dans l'onglet Réseau de l'outil de dev du navigateur.

Dans ma réponse à "Pytet", (post#3), j'ai indiqué : Avec F12/Réseau/Tout, le type de la requête server.on("/statut" ... est html.

Mais peut-être faut-il détailler plus ce résultat ? Par quelle commande ?

Cordialement.

Pierre.
28/02/2025, 11h03
Bisûnûrs

Le type de requête n'est pas intéressant (sous-onglet Headers), il faut examiner la réponse (sous-onglet Réponse), comme dit dans mon précédent message.

1 pièce(s) jointe(s)

Citation:

Envoyé par Bisûnûrs

Le type de requête n'est pas intéressant (sous-onglet Headers), il faut examiner la réponse (sous-onglet Réponse), comme dit dans mon précédent message.

Avec mon navigateur Firefox, quand je fais F12/réseaux, voilà ce que j'obtiens :

Pièce jointe 665023

Je ne vois pas de sous-onglet "réponse".

Bon, de toutes façons, je pense que mélanger du texte, html ou pas avec des variables, ce ne doit pas être très cohérent.

Je me suis arrangé autrement. J'ai mis tous les formatages dans ma page HTML et avec la requête, je ne retourne que des variables. Voilà ce que ça donne :

Partie HTML :
Code:

1 2 3 Date et Heure : ..&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Statut de fonctionnement : ..&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Signal WiFi : .. dBm
Partie script :
Code:

1 2 3 4 5 6 7 fetch('/statut') // Affichage des statuts de fonctionnement .then(response => response.text()) .then(data => { const [sta0, sta1] = data.split(','); document.getElementById('Sta0').textContent = sta0; document.getElementById('Sta1').textContent = sta1; });
Partie requête :
Code:

1 2 3 server.on("/statut", HTTP_GET, [](AsyncWebServerRequest *request) { // Envoi des statuts courants request->send(200, "text/html", statut0 + "," + forceWiFi); });
Dès lors, tout s'affiche correctement comme je le souhaite :

Code:

Date et Heure : 28/02/2025 18:09:42 Statut de fonctionnement : Normal Signal WiFi : -43 dBm

Cordialement.

Pierre.

28/02/2025, 20h26
Bisûnûrs

Citation:

Envoyé par ChPr

Je ne vois pas de sous-onglet "réponse".

Il faut cliquer sur la ligne en question pour avoir plus d'informations.

Citation:

Envoyé par ChPr

Dès lors, tout s'affiche correctement comme je le souhaite

Dans ce cas-là tu peux cliquer sur le bouton "Résolu" !
02/03/2025, 08h06
mathieu

le souci que vous avez eu au début de cette discussion venait peut-être de l'utilisation de "textContent".
le texte envoyé à cette propriété est transformé pour que cela s'affiche de la même façon. donc javascript échappe les caractères "<>&".

de l'autre côté il y a la propriété "innerHTML". elle permet de passer du code html donc cela est plus pratique pour modifier la mise en forme. mais d'un autre côté vous devez vérifier que le code html passé est correct et qu'il ne contient pas un problème de sécurité comme du code javascript venant d'un utilisateur malveillant par exemple.

vous pouvez trouver des informations sur ces propriétés là :
https://developer.mozilla.org/fr/doc...de/textContent
https://developer.mozilla.org/fr/doc...ment/innerHTML

une autre remarque aussi par rapport à la solution que vous avez choisi d'utiliser. cela se rapproche de ce qui est recommandé de mettre en place en ce moment, c'est à dire que la requête http doit répondre des données brutes au lieu de données mises en forme.
cela à plusieurs avantages, déjà la taille de la réponse est plus petite donc la réponse est plus rapide et cela utilise moins de bande passante donc moins de ressources.
cela permet aussi d'utiliser les données plus tard dans une autre application.