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

**NiRaDo** · 23/06/2009, 17h16

Bonjour.

Imaginons que j'ai une page comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**emmanuel.remy** · 24/06/2009, 00h55

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

**Vil'Coyote** · 24/06/2009, 09h15

Salut,

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

merci.

**RomainVALERI** · 24/06/2009, 11h50

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é.

**NiRaDo** · 24/06/2009, 13h35

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 &nbsp

dans feuille :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

      <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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**emmanuel.remy** · 24/06/2009, 14h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

%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

**NiRaDo** · 24/06/2009, 14h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

%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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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']);
		   }
		});
	});
});

**emmanuel.remy** · 24/06/2009, 15h17

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

**NiRaDo** · 24/06/2009, 16h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

AJAX

Discussions similaires

Partager

Partager