Neste exemplo de funcionamento do AJAX faremos o envio das informações de uma página local para o servidor e o servidor irá reenviar a informação recebida de volta. Se tudo estiver correta a informação irá retornar senão será exibida um alert de erro do AJAX e na caixa onde o texto deveria ser exibido fica em branco.
O método POST é utilizado para fazer um resquest de informações do servidor ( exatamente como o método GET ) mas enviando dados que o servidor irá utilizar para respoder corretamente a solicitação.
No método get o processo é o seguinte : O browser faz um request, o servidor devolve o resultado, o browser exibe o resultado no documento atual.
No método post o processo é o seguinte : O browser faz um request enviando informações ao servidor, o servidor recebe as informações, faz o processamento e devolve o resultado, o browser exibe o resultado no documento atual.
Esta é a página 06-EnviandoInfosSrv.html.
Ela esta dando um post via httprequest para a página 06-salvarDados.php e enviando os dados: nome: "Pedro" e email: "pedro@email.com"
Se tudo ocorrer corretamente na página de destino ( 06-salvarDados.php ) deveremos obter os dados enviados por esta página de volta.
Na página 06-salvarDados.php ela obtém os dados via método POST e retorna em seu body esses dados recebidos que é exibido na div logo abaixo.
Importante: O envio de dados só pode ser feito por uma tecnologia de servidor, ou seja, NÃO dá para enviar dados de uma página HTML para outra Página HTML, precisa ter uma tecnologia de servidor por trás da página de destino (php, asp, cgi). Caso contrário você terá um alert do AJAX com a mensagem 'Internal Server Error'
<script>
$.ajax({
url: "07-salvarDados.php",
type: 'post', //method: "POST",
data: {
nome: "Pedro",
email: "pedro@email.com"
},
beforeSend: function () {
$("#resultado").html("ENVIANDO...");
}
})
.done(function (msg) {
$("#resultado").html(msg);
})
.fail(function (jqXHR, textStatus, msg) {
alert(msg);
});
</script>
<h4>Resultado do processo :</h4>
<div id="resultado"></div>