Compago

...free knowledge

 
  • Increase font size
  • Default font size
  • Decrease font size
Home Manuali Programmazione Inviare dati in javascript e riceverli correttamente in PHP

Inviare dati in javascript e riceverli correttamente in PHP

E-mail Stampa PDF


In questo articolo affronteremo il problema di inviare una pagina HTML come un dato via POST con javascript, in particolare con JQuery.

Per inviare dei dati da una pagina web si può procedere in due modi:

  • attraverso una form col metodo submit
    • La form esiste e si invoca solo il metodo submit
    • La form non esiste e quindi viene creata in maniera dinamica
  • in modalità asincrona con una richiesta XMLHTTPRequest
    • si usa direttamente una XMLHTTPRequest
    • si usa uno dei tanti framework Ajax (JQuery,Mootools,Prototype, etc...)


Iniziamo con un metodo classico, cioè inviando una form, che, nel caso non esistesse, dovrebbe essere creata dinamicamente:

<html>
 <head>
 <script type="text/javascript">
   function invia(dest_url, data) {
     var form = createElement("form", {action: dest_url,method: "POST",style: "display: none"});
     form.appendChild(createElement("input", {type: "hidden",name: "data",value: data}));
     document.body.appendChild(form);
     form.submit();
     document.body.removeChild(form);
   }
 </script>
 </head>
 <body>
  <input type="button" onclick="invia(test.php,'ciao');" value="Invia"/>
 </body>
</html>


Se invece volessimo inviare i dati in maniera asincrona:

<html>
 <head>
 <script type="text/javascript">
   function invia(dest_url, data) {
     http = new XMLHttpRequest();
     params = "data="+data;
     http.open("POST", dest_url, true);
     http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     http.setRequestHeader("Content-length", params.length);
     http.setRequestHeader("Connection", "close");
     //optional callback function
     http.onreadystatechange = function() {
       if(http.readyState == 4 &amp;&amp; http.status == 200) {
         alert(http.responseText);
       }
     }
     http.send(params);
   }
 </script>
 </head>
 <body>
   <input type="button" onclick="invia(test.php,'ciao');" value="Invia"/>
 </body>
</html>


Come ultima ipotesi prendiamo in considerazione il metodo post usando JQuery:

<html>
<head>
 <script src="jquery-1.2.6.min.js"></script>
 <script>
   function invia(dest_url,my_data) {
     // invio dati
     $.post( dest_url, { data: my_data } ,
             //optional callback function
             function( answer ) {
               $( "#result" ).html( answer );
             }
           );
   };
 </script>
</head>
<body>
 <input id="my" onclick="invia('test.php','ciao')" type="button" value="Invia"/>
 <div id="result"></div>
</body>
</html>

Non mi voglio dilungare ad esaminare anche gli altri framework ajax, ma sapiate che sono altrettanto semplici da usare.

Ora che sapiamo come inviare una stringa col metodo POST procediamo con la seconda difficoltà, ovvero inviare il codice di una pagina HTML, compreso il codice degli script al suo interno.
Ci potrebbero essere diversi scenari e quindi molte soluzioni al problema.
Se si trattasse di una form e di inviare i suoi dati con JQuery potremo usare il metodo serialize:

$.post("test.php", $("#testform").serialize());

Ma in maniera più generale dovremo usare una funzione che riesca a codificare tutti i caratteri speciali che sicuramente si annidano nel codice o nel testo da inviare.
Le opzioni pronte all'uso sono 3:

  • escape()
  • encodeURI()
  • encodeURIComponent()

Senza dilungarci troppo tutte e tre si equivalgono; infatti in generale tutti i caratteri non-ASCII verranno rimpiazzati con la codifica %xx, dove xx è il relativo numero esadecimale che rappresenta il carattere. Per esempio lo spazio verrà trasformato in "%20".
La differenza sta nelle eccezzioni a questo mododi procedere, dato che escape() non codificherà i caratteri @*/+ , mentre encodeURI() non codificherà ~!@#$&*()=:/,;?+' e infine encodeURIComponent() non codificherà ~!*()'.

Io ho scelto di usare la JQuery e questo però introduce delle elaborazioni di cui occorre tenere conto.
Facciamo un esempio pratico. Come dato da inviare uso questa stringa:

<div align="center">aa a</div> 

che corrisponde in html ad un piccolo testo centrato rispetto alla pagina.
In fase di invio la JQuery codifica la stringa precedente in questo modo:

%3Cdiv+align%3D%22center%22%3Eaa+a%3C%2Fdiv%3E

Ora immaginiamo di ricevere il dato trasmesso nel file PHP e di usarlo in questo modo:

<?php 
   echo $_POST["data"];
?>

come risultato avremo:

<div align=\"center\">aa a</div> 

che non permetterà di allineare il testo come avveniva inizialmente. Tutto questo a causa del carattere ' " ' presente nella stringa iniziale.
C'è da notare che anche l'interprete PHP inserisce una certa decodifica dei dati in arrivo, quindi quando si trova a gestire qualche carattere particolare inserisce un "\" prima. In questo caso basterà utilizzare la funzione stripslashes sui dati ricevuti:

echo stripslashes($_POST["data"]);

Ulteriori problemi potrebbero esserci con dei caratteri unicode come ad esempio èéàùìò°ç etc...
Quindi occorre convertire la stringa da un set di caratteri ad un altro per avere una corretta visualizzazione, e per questo motivo useremo la funzione iconv, che ha come parametri un set di caratteri in ingresso ed un altro in uscita ed infine la stringa da elaborare.
Nel mio caso i set di caratteri sono ISO-8859-1(ingresso) e Windows-1252(uscita).

$stringData=$_POST["data"];
$stringData=stripslashes($stringData);
$stringData = iconv("ISO-8859-1","Windows-1252","$stringData");

oppure

$stringData = mb_convert_encoding("$stringData", 'Windows-1252');


Ad ogni modo potrebbe essere necessario trovare le codifiche esatte e dato che non è questo il luogo per una spiegazione in dettaglio, consiglio di provare un po di conversioni:

$list = array("UTF-8", "ASCII", "Windows-1252", "ISO-8859-15", "ISO-8859-1", "ISO-8859-6", "CP1256");
$c = "";
foreach ($list as $i) {
 foreach ($list as $j) {
  $c .= " $i -> $j ".iconv($i, $j, "$stringData");
 }
}
$stringData = $c;


In questo modo siamo riusciti a inviare dei dati in formato html tramite il metodo POST.

Per chi avesse la necessità di codificare i dati da inviare consiglio comunque la funzione javascript encodeURIComponent(), mentre per riceverli in php basta usare la funzione preg_match unita sempre ad iconv:

$stringData = preg_replace('/%([0-9a-f]{2})/ie', "chr(hexdec('\\1'))", $_POST["html"]);
$stringData = iconv(UTF-8,ISO-8859-1,$stringData);



Ultimo aggiornamento ( Domenica 08 Maggio 2011 14:06 )  
Loading

Login




Chiudi