Submit di un Form tramite POST JavaScript

Secondo le specifiche HTML 4.0:

• Se il metodo é "GET", lo user agent prende il valore dell'azione, vi concatena un '?' ed il data set del form, mediante il content-type application/x-www-form-urlencoded. Quindi lo user agent inoltra la richiesta includendo questo URI. In questo modalitá, i dati del form sono vincolati a codici ASCII.
• Se il metodo é "POST", lo user agent effettua un submit HTTP POST utilizzando il valore dell'action e un messaggio creato in accordo con il content type specificato nell'attributo enctype.

Quali sono i vantaggi dei POST JavaScript?

• Effettuare redirect diversi all'action
• Veicolare dati senza refresh di UI per l'end user
• Evitare l'abuso di query string e 'bellificare' gli URL

Effettuare un submit POST

Copia-incolla il seguente codice nella sezione HEAD della pagina HTML:

<script language="javascript">
function post(dictionary, url, method) {
	method = method || "post"; // post (impostato a default) ppure get

	// Crea l'oggetto form
	var form = document.createElement("form");
	form.setAttribute("method", method);
	form.setAttribute("action", url);

	// Per ogni coppia chiave-valore
	for (key in dictionary) {
		//alert('key: ' + key + ', value:' + dictionary[key]); // debug
		var hiddenField = document.createElement("input");	
		hiddenField.setAttribute("type", "hidden"); 
		hiddenField.setAttribute("name", key);
		hiddenField.setAttribute("value", dictionary[key]);
		// appende il nuovo controllo creato
		form.appendChild(hiddenField); 
	}

	document.body.appendChild(form); // inietta l'oggetto form nel body del DOM
	form.submit();
}
</script>

Come lo uso?

Copia il seguente codice nella sezione BODY della pagina HTML. Come vedi viene dichiarata una collezione di oggetti (dizionario), quindi vengono aggiunti due parametri. Puoi aggiungere quanti parametri desideri.

<script language="javascript">
	var myDictionary = [];
	myDictionary["1stKey"] = "1stValue";
	myDictionary["2ndKey"] = "2ndValue";
</script>

<input type="button" value="Click me to POST" 
	onclick="javascript:post(myDictionary, 'destination.html');" />
<input type="button" value="Click me to GET" 
	onclick="javascript:post(myDictionary, 'destination.html', 'get');" />

La funzione POST accetta un dizionario, una destinazione URL, e opzionalmente il metodo (POST o GET, case in-sensitive).

L'alternativo jQuery.post()

Se jQuery é giá parte della tua soluzione, puoi usare la funzione jQuery.post() in sostituzione:

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

che constituisce un'abbreviazione per la funzione Ajax:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Dunque, il codice equivalente il POST dei valori menzionati sopra in jQuery, sarebbe:

$.post( "test.php", { 1stKey: "1stValue", 2ndKey: "2ndValue" } );

Ulteriori dettagli riguardo jQuery.post() sono disponibili a questo link.