Articolo originale: JQuery Ajax POST Method
Invia una richiesta asincrona http POST per richiedere i dati dal server. La sua forma generale è:
jQuery.post( url [, data ] [, success ] [, dataType ] )
- url : è l'unico parametro obbligatorio. Questa stringa contiene l'indirizzo a cui inviare la richiesta. I dati restituiti verranno ignorati se non viene specificato nessun altro parametro
- data : un oggetto semplice o una stringa che viene inviato al server con la richiesta.
- success : una funzione di callback che viene eseguita se la richiesta riesce. Prende come argomento i dati restituiti. Viene anche passato lo stato del testo della risposta.
- dataType : il tipo di dati previsto dal server. L'impostazione predefinita è Intelligent Guess (xml, json, script, text, html). Se viene fornito questo parametro, è necessario fornire anche la funzione di callback di successo.
Esempi
$.post('http://example.com/form.php', {category:'client', type:'premium'});
richiede form.php
dal server, inviando dati aggiuntivi e ignorando il risultato restituito.
$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
alert("success");
$("#mypar").html(response.amount);
});
richiede form.php
dal server, inviando dati aggiuntivi e gestendo la risposta restituita (formato json). Questo esempio può essere scritto in questo formato:
$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
alert("success");
$("#mypar").html(response.amount);
});
L'esempio seguente pubblica un modulo utilizzando Ajax e inserisce i risultati in un div
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- il risultato della ricerca sarà reso all'interno di questo div -->
<div id="result"></div>
<script>
// Allega un gestore di invio al form
$( "#searchForm" ).submit(function( event ) {
// Interrompi l'invio normale del form
event.preventDefault();
// Ottieni alcuni valori dagli elementi nella pagina:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Invia i dati tramite post
var posting = $.post( url, { s: term } );
// Metti i risultati in un div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>
L'esempio seguente utilizza l'api di github per recuperare l'elenco dei repository di un utente utilizzando jQuery.ajax() e inserire i risultati in un div
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form id="userForm">
<input type="text" name="username" placeholder="Enter gitHub User name">
<input type="submit" value="Search">
</form>
<!-- il risultato della ricerca sarà reso all'interno di questo div -->
<div id="result"></div>
<script>
// Allega un gestore di invio al form
$( "#userForm" ).submit(function( event ) {
// Interrompi l'invio normale del modulo
event.preventDefault();
// Ottieni alcuni valori dagli elementi nella pagina:
var $form = $( this ),
username = $form.find( "input[name='username']" ).val(),
url = "https://api.github.com/users/"+username+"/repos";
// Invia i dati tramite post
var posting = $.post( url, { s: term } );
//AFunzione Ajax per inviare una richiesta get
$.ajax({
type: "GET",
url: url,
dataType:"jsonp"
success: function(response){
//se la richiesta viene eseguita correttamente, la risposta rappresenta i dati
$( "#result" ).empty().append( response );
}
});
});
</script>
</body>
</html>
jQuery.ajax()
$.post( url [, data ] [, success ] [, dataType ] )
è una funzione abbreviata Ajax, equivalente a:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.ajax()
fornisce molte più opzioni che possono essere trovate qui
Maggiori informazioni:
Per ulteriori informazioni, visitare il sito Web ufficiale