Envio de dados com método POST usando AJAX e PHP
Esta seria a “versão em ajax” para a função POST() que escrevi em PHP no artigo “Envio de dados com PHP utilizando método POST sem usar formulário HTML”. Com este exemplo você poderá enviar dados utilizando o método POST para um arquivo PHP, para que estes dados possam ser processados e retornar (ou não) uma resposta a ser exibida na tela. Para isto, utilizaremos 2 funções simples desenvolvidas por mim e totalmente explicadas aqui.
Também mostrarei os 2 exemplos de envio, 1 utilizando formulário e outro utilizando links.
1. Arquivo “post.js”
Nada melhor do que ensinar comentando o código, então veja abaixo o arquivo post.js. Este arquivo contém as 2 funções para trabalhar com o AJAX. A primeira função, enviaAjax(), serve para enviar um formulário utilizando o método POST. Essa função irá criar uma URL (uma query string, pra ser mais exata) utilizando os nomes e os valores dos campos do formulário.
/*
1. frmNome - Nome do formulário
2. url - arquivo para onde será enviado o POST
3. destino (opcional) - conteiner para onde ira a resposta
vinda do arquivo "url"
*/
function enviaAjax(frmNome, url, destino)
{
f = document.getElementById(frmNome);
query="";
j=0;
for(i=0; i < f.elements.length;i++)
{
if((f.elements[i].type=='radio' || f.elements[i].type=='checkbox' )&& !(f.elements[i].checked))
{
f.elements[i].value='';
if(f.elements[i].value!='')
{
query += j==0 ? '' : '&';
query += f.elements[i].name + '=' + f.elements[i].value;
j++;
}
}
else
{
query += j==0 ? '' : '&';
query += f.elements[i].name + '=' + f.elements[i].value;
j++;
}
}
//chama a função postajax() para enviar os dados
//ao arquivo .php que fará o processamento
postajax(url, query, destino);
}
Depois de criar a query string, esta função chama a nossa segunda função, postajax(). Essa é a função responsável pelo truque de enviar a requisição para o servidor via POST e receber os dados retornados pela página .php que fez o processamento dos dados enviados. A resposta enviada pelo servidor será depositada no conteiner (geralmente uma DIV) informado no parâmetro "destino" da função anterior.
function postajax(url, query, destino)
{
var status = false;
var tipo_conteudo = "application/x-www-form-urlencoded; charset=UTF-8";
if(typeof destino !=='undefined')
div_resposta = document.getElementById(destino);
// Tenta criar objeto XMLHttpRequest NATIVO
if (window.XMLHttpRequest) {
requisicao = new XMLHttpRequest();
requisicao.onreadystatechange=function()
{
if(requisicao.readyState==4)
{
if(typeof destino !=='undefined')
{
//Aqui vai o processamento a ser feito
//quando o arquivo .php retornar o resultado
/*
Recebe a resposta e coloca ela no conteiner
pêgo pela variável "destino"
*/
texto=unescape(requisicao.responseText.replace(/+/g," "));
div_resposta.innerHTML=texto;
div_resposta.style.visibility="visible";
//exibe mensagem de sucesso na tela
alert("Dados enviados com sucesso!");
}
}
}
//Abre a conexão
requisicao.open("post", url, true);
//Envia os cabeçalhos
requisicao.setRequestHeader("Content-Type", tipo_conteudo);
//Envia a requisicao
requisicao.send(query);
//Status da requisicao
status = true;
} //Senão, tenta criar objeto XMLHttpRequest ActiveX (Internet Explorer)
else if (window.ActiveXObject)
{
requisicao = new ActiveXObject("Microsoft.XMLHTTP");
if (requisicao)
{
requisicao.onreadystatechange=function()
{
if(requisicao.readyState==4)
{
if(typeof destino !='undefined')
{
//Aqui vai o processamento a ser feito
//quando o arquivo .php retornar o resultado
/*
Recebe a resposta e coloca ela no conteiner
pêgo pela variável "destino"
*/
texto=unescape(requisicao.responseText.replace(/+/g," "));
div_resposta.innerHTML=texto;
div_resposta.style.visibility="visible";
//exibe mensagem de sucesso na tela
alert("Dados enviados com sucesso!");
}
}
}
//Abre a conexão
requisicao.open("post", url, true);
//Envia os cabeçalhos
requisicao.setRequestHeader("Content-Type", tipo_conteudo);
//Envia a requisicao
requisicao.send(query);
//Status da requisicao
status = true;
}
}
return status;
}
2. Arquivo "exemplo_form.html"
Agora que já temos as duas funções que executam o truque, vamos ver o nosso primeiro exemplo, enviando um formulário.
Acima temos um formulário HTML normal, e o nome e a id do formulário são "form1". Dentro do formulário, dois campos chamados "nome" e "email", e também um botão do tipo "button". Neste botão, no evento onclick, eu chamo a função enviaAjax('form', 'processa_form.php', 'resultado'), onde "form1" é a id do meu formulário, 'processa_form.php' é o arquivo de destino dos daddos e 'resultado' é a ID da DIV para onde o resultado do processamento será retornado. É essencial que este botão seja do tipo "button" e não "submit", pois o botão do tipo "submit" poderia ignorar a chamada da função enviaAjax() e simplesmente enviar o formulário normalmente, sem usar AJAX.
É no arquivo processa_form.php que você fará o que quiser com os dados do seu formulário. Para provar que ele realmente funciona, no final deste post, fiz um pacotinho com um exemplo onde os dados enviados pelo formulário são gravados em um arquivo chamado "log.txt", apenas para mostrar que realmenet funciona.
3. Arquivo "exemplo_link.html"
Podemos usar as mesmas funções para enviar esses dados utilizando simplesmente um link. O exemplo abaixo mostra um quiz onde uma pergunta sobre uma imagem *duvidosa* é feita, e o usuário deve clicar no link para responder. Abaixo dos links, aparecerá uma mensagem informando ao usuário se a resposta que ele informou está certa ou errada.
Note que desta vez estou chamando a função postajax() diretamente, sem utilizar a enviaAjax(), pois esta só servia para criar uma query string a partir dos campos do formulário. Desta vez, eu mesma estou informando a query string (segundo parâmetro) a ser enviada para o arquivo "processa_link.php" (primeiro parâmetro). O resultado retornado aparecerá na div "resultado" (terceiro parâmetro), que fica posicionada no final da página.
Clique aqui para fazer o download completo contendo os 3 arquivos exibidos acima + os arquivos "processa_form.php" e "processa_link.php". (Baixado 236 vezes)
14 Responses
Leave a Reply
Andresa Martins é palmeirense fanática e programadora há mais de 6 anos. Bacharel em Ciência da Computação, também adora futebol, Fanta e bombom Ouro Branco.
ola !!! queria saber como eu faço pra enviar de um programa para o site um arquivo .txt e depois enviar para um email ? sendo que no programa ele ja cria o .txt so nao estou conseguindo enviar para o site e depois para um email . minha dificuldade seria so na parte do php etc…
obrigado .
ola !!! queria saber como eu faço pra enviar de um programa para o site um arquivo .txt e depois enviar para um email ? sendo que no programa ele ja cria o .txt so nao estou conseguindo enviar para o site e depois para um email . minha dificuldade seria so na parte do php etc…
obrigado .
Axei bem trabalhoso fazer o ajax da forma que você explicou, utilizar um framework como prototype ou jquery e fazer as requisições assincronas é mais fácil, principalmente para iniciantes.
da uma olhada:
http://www.prototypejs.org/api/ajax/request
http://www.livroajaxjquery.com.br/download.php
Continue postando =D
Na realidade, a intenção não é fazer funcionar, mas sim aprender como funciona. Não sou técnica, analista ou engenheira, estou me formando em Ciência da Computação, por isso o meu pensamento é o de ensinar a programação verdadeira, não o copiar-e-colar, porque as pessoas usam Frameworks mas não sabem como eles funcionam por dentro.
Mas a dica é excelente, eu deveria ter mencionado no meu post, muito obrigada!
E a quem interessa, eu tenho uma pequena preferência pelo Prototype, pois acho ele melhor estruturado e mais versátil, mas o jquery é muito bom também!
HUAHUauhauhauhahuahuauha… A menina colocou vc no bolso agora, foi querer dar uma d espertao c ferrou XD
/euriexageradamente
Na realidade, a intenção não é fazer funcionar, mas sim aprender como funciona. Não sou técnica e nem engenheira, estou me formando em Ciência da Computação, por isso o meu pensamento é o de ensinar a programação verdadeira, não o copiar-e-colar, porque as pessoas usam Frameworks mas não sabem como eles funcionam por dentro.
Mas a dica é excelente, eu deveria ter mencionado no meu post, muito obrigada!
E a quem interessa, eu tenho uma pequena preferência pelo Prototype, pois acho ele melhor estruturado e mais versátil, mas o jquery é muito bom também!
Mto boa a dica….
Em relação a aprender como funciona "por baixo dos panos" com ctz isso eh excelente.
Frameworks trazem produtividade, pela grande quantidade que metodos prontos que podem ajudar em um determinado problema………. mas com ctz eh isso que diferencia profissionais que apenas usam frameworks e aqueles que usam frameworks e se aventuram em explorar novas possibilidades e aprender a escovar um pouco de bits…..
Olá,
parabens pelo POST me salvou a vida.
Só uma pergunta…
Ele funciona qnd tenho um combobox no fomulario ?
Ele envia normal o valor do combo ?
Obrigado
Funcionar funciona, mas você terá que fazer uma série de adaptações.
Por exemplo, na função "enviaAjax", entre as linhas 12 e 21, eu faço um processamento para criar uma url para ser enviada ao arquivo .php que fará o processamento dos dados. No seu caso, você vau ter que excluir esse trecho do programa, e escrever você mesmo a url, por exemplo:
<script>
function enviaAjax(valor_combo, url, destino)
{
f = document.getElementById(frmNome);
query="?valor_do_combo="+valor_combo;
//chama a função postajax() para enviar os dados
//ao arquivo .php que fará o processamento
postajax(url, query, destino);
}
</script>
<select name="meu_combo" onchange="enviaAjax(this.options[this.selectedIndex].value, 'arquivo.php', 'div_resultado')" >
<option value="0">Nenhum Numero</option>
<option value="1">Numero 1</option>
<option value="2"> Numero 2</option>
</select>
<div id="div_resultado"></div>
As outras funções ficam do mesmo jeito, sem nenhuma modificação.
Andresa !
Boa Tarde !
Não conseguir fazer funcionar com um select name no fornulário.
Me ajuda ? Obrigado !
Andressa, muito bom seu post. Me quebrou um galhão. E não ligue para caras como esse Wellington, que mal sabem escrever. Ao invés de só copiar e colar, é importante aprender para poder melhorar o que já se pega pronto.
Ah, vou manter os créditos quando usar seu script.
Um grande abraço.
People deserve very good life and credit loans or sba loan would make it much better. Because people’s freedom relies on money.
jQuery Rulezzzz