[AJAX] Enregistrer le contenu d'un div sur le serveur

Bonjour.

Imaginons que j'ai une page comme ceci :

Code:

---

1 2 3 4 5 6

<div contentEditable="true" class="feuille"> <p>Mon premier paragraphes</p> <p>Veuillez introduire votre contenu </div>   <a id="enregistrer" href="#">enregistrer</a>

---

L'utilisateur peut saisir du texte, et via quelques boutons, peut mettre en gras, italique des parties de texte qui se trouvent dans "feuille".

En cliquant sur enregistrer, j'aimerais que le contenu de "feuille" s'enregistre sur le serveur en tant que save.html .

Via la technologie AJAX, lorsqu'on clique sur "enregistrer", j'envoi une requete vers la page sauvegarderContenu.php qui a un $_POST['contenuASauvegarder'] qui reçois le contenu de "feuille".

Le problème est que, apparemment, certains caractères html peuvent poser problème lors de la récupération des données côté serveur (en faisant un echo je constate qu'il n'y a rien).

Il me faudrait donc à mon avis une fonction identique en php/javascript qui permet de coder les caractères spéciaux html ... du genre htmlentities() ?

Connaîtriez vous un moyen simple pour répondre à ce genre de problème ?

Salut,

Ce n'est pas normal qu'un echo ne renvoie rien. Même si les caractères sont erronés il devrait y avoir quelque chose. Question: tu testes $_POST; ta requête AJAX est bien en POST ? Si oui, es tu sûr que les données sont bien postées ?

Et plus généralement les caractères envoyés vers le server sont correctement encodés, il n'y a donc rien à faire côté client. Ni côté server d'ailleurs.

ERE

Salut,

pourrais tu indiqué le jvs que tu utilise pour récupérer la valeur de ton div?

merci.

Une autre piste éventuelle pour la résolution de ton problème : surveiller les entêtes HTTP sortantes au moment de l'envoi de ta requête. Il y a par exemple le module complémentaire (de FF) "LiveHTTPHeaders" qui fait ça très bien : ça te permettrait de vérifier ce qui est effectivement envoyé.

Bonjour et merci à tous pour vos réponses.

En fait, des données sont bien sauvegardées s'il n'y pas de caractère du genre ' ' dans la div "feuille".

En effet, si par exemple j'ai ceci (notez le  ) dans feuille :

Code:

---

1 2 3 4 5 6

&nbsp;<p>Bienvenue !</p> <div class="etiquetteModele" style="border: 0px solid red; margin: 5px; float: left; width: 342px; height: 244px; background-image: url(plaquettes/1659476/etiquette.png); display: none;"> <div class="texte" style="font-family: 'Trebuchet MS',Verdana,Tahoma,sans-serif; margin-left: 52px; margin-top: 87px; width: 237px; height: 87px; color: white; text-align: center; font-size: 14pt; font-weight: 800;"> <span>NOM ARTICLE<br>00.00€</span> </div> </div>

---

Rien n'est enregistré. Si par contre j'ai ceci dans feuille :

Code:

---

1 2 3 4 5 6

<p>Bienvenue !</p> <div class="etiquetteModele" style="border: 0px solid red; margin: 5px; float: left; width: 342px; height: 244px; background-image: url(plaquettes/1659476/etiquette.png); display: none;"> <div class="texte" style="font-family: 'Trebuchet MS',Verdana,Tahoma,sans-serif; margin-left: 52px; margin-top: 87px; width: 237px; height: 87px; color: white; text-align: center; font-size: 14pt; font-weight: 800;"> <span>NOM ARTICLE<br>00.00€</span> </div> </div>

---

Ce qui est enregistré devient (dans le fichierSav.html) :

Code:

---

<p>Bienvenue !</p> <div class=\"etiquetteModele\" style=\"border: 0px solid red; margin: 5px; float: left; width: 342px; height: 244px; background-image: url(plaquettes/1336404/etiquette.png); display: none;\"><div class=\"texte\" style=\"font-family: \'Trebuchet MS\',Verdana,Tahoma,sans-serif; margin-left: 52px; margin-top: 87px; width: 237px; height: 87px; color: white; text-align: center; font-size: 14pt; font-weight: 800;\"><span>NOM ARTICLE<br>00.00€</span></div></div>

---

Il y a donc les anti-slashes.

Donc il y a au moins un problème avec les caractères spéciaux bien que je mettes en "post" mon envoi :

JVS utilisé :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function() { $("#fenetreEnregistrer input[name=enregistrerServeur]").click(function() { $.ajax({ type: "POST", url: "enregistrerPlaquette.php", dataType: "json", data: "nomPlaquette="+plaquetteOuverte+"&contenuPlaquette="+$(".feuille").html(), success: function(retour){ $("#fenetreEnregistrer").dialog('close'); //alert($(".feuille").html()); alert("Vos données semblent avoir été enregistrées dans un fichier dont le nom est " + retour['nom']); } }); }); });

---

RomainVALERI : je vais tenter de voir ça de plus près.

Salut,

Je viens de faire un test simple avec un formulaire qui envoie exactement els données que tu fournis, et je ne rencontre aucun souci, tout est correctement encodé, en post ou en get.

D'après ton code, le & serait peut-être confondu avec le & d'un nouveau paramètre de l'URL.

ERE

EDIT
----
LEs données envoyées:

Code:

---

%26nbsp%3B%3Cp%3EBienvenue+%21%3C%2Fp%3E%0D%0A++++%3Cdiv+class%3D%22etiquetteModele%22+style%3D%22border%3A+0px+solid+red%3B+margin%3A+5px%3B+float%3A+left%3B+width%3A+342px%3B+height%3A+244px%3B+background-image%3A+url%28plaquettes%2F1659476%2Fetiquette.png%29%3B+display%3A+none%3B%22%3E%0D%0A%09%3Cdiv+class%3D%22texte%22+style%3D%22font-family%3A+%27Trebuchet+MS%27%2CVerdana%2CTahoma%2Csans-serif%3B+margin-left%3A+52px%3B+margin-top%3A+87px%3B+width%3A+237px%3B+height%3A+87px%3B+color%3A+white%3B+text-align%3A+center%3B+font-size%3A+14pt%3B+font-weight%3A+800%3B%22%3E%0D%0A%09%09%3Cspan%3ENOM+ARTICLE%3Cbr%3E00.00%80%3C%2Fspan%3E%0D%0A%09%3C%2Fdiv%3E%0D%0A%3C%2Fdiv%3E

---

Citation:

---

Envoyé par emmanuel.remy

Salut,

Je viens de faire un test simple avec un formulaire qui envoie exactement els données que tu fournis, et je ne rencontre aucun souci, tout est correctement encodé, en post ou en get.

D'après ton code, le & serait peut-être confondu avec le & d'un nouveau paramètre de l'URL.

ERE

EDIT
----
LEs données envoyées:

Code:

---

%26nbsp%3B%3Cp%3EBienvenue+%21%3C%2Fp%3E%0D%0A++++%3Cdiv+class%3D%22etiquetteModele%22+style%3D%22border%3A+0px+solid+red%3B+margin%3A+5px%3B+float%3A+left%3B+width%3A+342px%3B+height%3A+244px%3B+background-image%3A+url%28plaquettes%2F1659476%2Fetiquette.png%29%3B+display%3A+none%3B%22%3E%0D%0A%09%3Cdiv+class%3D%22texte%22+style%3D%22font-family%3A+%27Trebuchet+MS%27%2CVerdana%2CTahoma%2Csans-serif%3B+margin-left%3A+52px%3B+margin-top%3A+87px%3B+width%3A+237px%3B+height%3A+87px%3B+color%3A+white%3B+text-align%3A+center%3B+font-size%3A+14pt%3B+font-weight%3A+800%3B%22%3E%0D%0A%09%09%3Cspan%3ENOM+ARTICLE%3Cbr%3E00.00%80%3C%2Fspan%3E%0D%0A%09%3C%2Fdiv%3E%0D%0A%3C%2Fdiv%3E

---

---

Tu n'as même pas les anti-slashs ?

Pourtant ma page enregistrerPlaquette.php est comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?php $retour; $retour['nom'] = ""; $retour['erreur'] = "";   $nomPlaquette = $_REQUEST['nomPlaquette']; $contenuPlaquette = $_REQUEST['contenuPlaquette']; $urlPlaquette = "plaquettes/".$nomPlaquette;   //echo " le contenu : " . $contenuPlaquette; if(is_dir($urlPlaquette)) { $ressource = fopen($urlPlaquette."/plaquette.html", "w"); fputs($ressource, $contenuPlaquette); fclose($ressource);   $retour['nom'] = $nomPlaquette; } else { $retour['erreur'] = "Echec lors de l'enregistrement de " . $nomPlaquette;   }   echo json_encode($retour); ?>

---

Et le script qui envoi les données est le suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function() { $("#fenetreEnregistrer input[name=enregistrerServeur]").click(function() { $.ajax({ type: "POST", url: "enregistrerPlaquette.php", dataType: "json", data: "nomPlaquette="+plaquetteOuverte+"&contenuPlaquette="+$(".feuille").html(), success: function(retour){ $("#fenetreEnregistrer").dialog('close'); //alert($(".feuille").html()); alert("Vos données semblent avoir été enregistrées dans un fichier dont le nom est " + retour['nom']); } }); }); });

---

8O

Les données fournies sont celles envoyées. Donc issues de FF.
Quant à ton backslash je pense qu'il vient de la config de PHP (paramètre magic_quotes_gpc dans php.ini)

ERE

Je sais que les données envoyées sont les données reçues ... Quand je parlais de données envoyées je parlais de celles avant l'envoi effectif (le alert que j'ai mis en commentaire dans la fonction associée à $.ajax (//alert($(".feuille").html());)

J'ai retiré les anti-slashes dans enregistrerPlaquette.php , mais de toute manière le problème vient d'autre part

Code:

---

1 2 3 4 5 6

<p>Bienvenue !</p> <div class="etiquetteModele" style="border: 0px solid red; margin: 5px; float: left; width: 342px; height: 244px; background-image: url(plaquettes/3548614/etiquette.png); display: none;"> <div class="texte" style="font-family: 'Trebuchet MS',Verdana,Tahoma,sans-serif; margin-left: 52px; margin-top: 87px; width: 237px; height: 87px; color: white; text-align: center; font-size: 14pt; font-weight: 800;"> <span>NOM ARTICLE<br>00.00€</span> </div> </div>

---

Le symbole € devient € dans le fichier de sauvegarde

Enfin bon, je vais chercher d'où pourrait venir tous ces problèmes.