Utilizando o Método POST em Ajax
Como você já devia saber, o método GET só suporta o envio de 255 caracteres por vez. Com Ajax, isso costuma ser o suficiente, mas nem sempre. Em editores de texto, postagens em geral, cadastros, senhas (não é pelo tamanho, é que os dados não aparecem na URL)… Isso é conseguido por um método HTTP chamado “POST”. Possivelmente você já deve tê-lo usado, mas em Ajax…
Sim, é perfeitamente possível. Vamos lá então. Se você já tentou, provavelmente chegou perto de conseguir, algo como:
var xmlhttp = setXmlHttp(); // Função Personalizada
xmlhttp.open("POST", "http://localhost/post.php", true);
xmlhttp.send("seus_dados=via_post");Essa é a base, mas não obteremos sucesso. Tudo o que fizemos, 100% mesmo, está correto. O problema é que falta mais alguma coisa. A primeira delas: o tipo de dados, não pode ser text/html ou text/xml, o padrão. O certo é o tipo de dados apropriado para envio de formulários: “application/x-www-form-urlencoded”. Vamos lá:
var xmlhttp = setXmlHttp(); // Função Personalizada
xmlhttp.open("POST", "http://localhost/post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Setando Content-type
xmlhttp.send("seus_dados=via_post");Tudo certo, irá funcionar. Pelo que sei, o método POST aceita uma quantidade enorme de dados, enorme mesmo. Tudo o que você tentar enviar passará. Não sei exatamente o quanto. Mas, por padrão, o tamanho máximo permitido é 4096, para evitar erros. Isso faz com que seus dados cheguem truncados as vezes. Setamos então um novo header: “Content-length”.
var xmlhttp = setXmlHttp(); // Função Personalizada
xmlhttp.open("POST", "http://localhost/post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Setando Content-type
xmlhttp.setRequestHeader("Content-length", dados_a_enviar.length); // Comprimento do conteúdo=comprimento dos dados a enviar
xmlhttp.send(dados_a_enviar);E agora sim estamos com tudo pronto para funcionar! Não falta mais nada.
É, na verdade falta apenas uma coisinha: como enviar os dados? Como você já viu, enviamos os dados através de xmlhttp.send(). Mas como? Lembra-se das famosas query strings? Da mesma maneira, mas sem o & inicial.
Recebendo os Dados
Além de enviar os dados, também devemos recebê-los corretamente. Ensinarei usando o PHP, mas poderia ser usada qualquer outra linguagem server-side.
Na verdade, para recebermos os dados, usamos o $_POST['variavel']. Nada mais simples. Mas há um probleminha: “A AÇÃO DO AJAX É FANTÁSTICA” chegaria truncada, mais ou menos assim: “AÇÃO DO AJAX É FANTÃSTICA”. Você saberia dizer por quê?
Por padrão, os dados são enviados, recebidos, manipulados e outras ações desconhecidas de minha pessoa no formato UTF-8. Por causa dos acentos, a língua portuguesa chegaria totalmente truncada, como mostrei acima. Solução: transformar para ISO-8859-1. Como?
<?php
header("Content-type: text/html; charset=iso-8859-1"); // Header
$var = utf8_decode($_POST['var']); //Transformando caracteres
?>Também poderíamos adicionar mais opções, como retirar tags e barras… Não vem ao caso.
Como muito bem sugerido pelo Mateus Pádua, podemos decodificar todo o $_POST de uma vez só, utilizando o mapeamento de array:
$_POST = array_map(utf8_decode, $_POST);Outro porém: alguns bancos de dados preferem o UTF-8 para trabalhar. Nesse caso, precisamos guardar os dados nesse formato. Poooooortanto, precisamos fazer o inverso: transformar de ISO-8859-1 para UTF-8. Isso se faz através da função PHP utf8_encode(data).
Espero que tenha servido bem aos seus propósitos. Qualquer dúvida, comentem!
Opa Julio, tava pensando aqui com meus botões.
E se em vez de você usar o iso-8859-1 no PHP pra receber os dados, você encodar os dados para UTF-8 (URI encode) na hora do envio via javascript?
Será que dá certo? Não tentei aqui pois cheguei agora no serviço e a preguiça não deixou.
Na hora de enviar seria algo como:
xmlhttp.send(“variavel1=” + encodeURIComponent(var1) + “&variavel2=” + encodeURIComponent(var2));
O que acha? Dá certo?
Bem, eu mando por essa forma às vezes. E tem vez que dá, tem vez que não. Vou dar uma pesquisada, e dou o retorno pro pessoal daqui.
Fala Júlio, achei legal o texto, vai ser bem útil para muita gente.
Micox: [...]dados para UTF-8 (URI encode) na [...]
Na verdade, creio que esses são tipos diferentes de codificação… mas é possível usar utf8 em javascript:
http://www.webtoolkit.info/javascript-utf8-decode-encode.html
Aliás, acho que daria certo também com encodeURIComponent.
Abraço
Julio,
hoje tive um pequeno problema na hora de enviar dados e capturar no PHP. Nem lembrava deste post e fui ao google rapidim.
Adivinha quem me salvou? Este post aqui mesmo e o lance do utf8_decode. Ihúuu. heheh
Vou linkar este post lá no meu de receber acentuação. heheh
Falows.
blz Julio…seguinte na minha aplicacao so envia poucos dados mesmo…nao consigo enviar grande qtde de dados…inseri essa linha ai do Content-length ,q vc citou, no meu ajax.php mas continua nao enviando…alguma ideia ?vlw!
Seguinte, poste seu código lá no Webly. Eu e a galera de lá podemos te dar uma mão, certo? Até mais!
Valeu Julio o Content-length salvou minha pele aqui. Outa coisa o encodeURIComponent que o MICOX falou funciona direitinho sim já utilizo tem algum tempo e não tive problemas. valeu.
Só em Jesus Cristo a salvação.
Pessoal achei uma solução supinpa, rs, antes de começar a usar qualquer dado do array $_POST coloquem essa linha:
$_POST = array_map(utf8_decode, $_POST);
Ela entra em todos os indices do array $_POST e decodifica todos eles, podendo usar os dados assim depois disso:
$var_nome = $_POST["nome"]
$var_email = $_POST["email"]
$var_telefone = $_POST["telefone"]
E NÂO precisando mais usar usar assim:
$var_nome = utf8_decode($_POST["nome"])
$var_email = utf8_decode($_POST["email"])
$var_telefone = utf8_decode($_POST["telefone"])
Espero que ajude, abraços
Melhor ainda Matheus. use o comando extract($_POST) após o seu primeiro comando $_POST = array_map(utf8_decode, $_POST); , e depois use apenas as variaveis desta maneira $nome,$email,$telefone.
Parabéns Julio, gostei do seu blog. Essa dica me ajudou muito
Mais uma vez parabéns, você me ajudou a resolver um problema que já tava me dando dor de cabeça.
Parabéns pelo excelente blog. Comecei a programar pra web há pouco mais de um mês e tive que, a duras penas, resolver por conta própria um monte de coisa que tem resposta por aqui. Com certeza me tornarei um visitante habitual do seu blog.
Acho ótimo que tenha gente aproveitando algo do que eu escrevo, principalmente aqui nesse post. Não tenho tempo de agradecer individualmente a todos, mas MUITO OBRIGADO a todos que visitam o blog e comentam, principalmente nesse post, que é onde mais o pessoal cai. Até mais!
Passei horas procurando a solução para os acentos com AJAX e PHP via POST. Só resolvi com ajuda deste site. A internet só se tornou o que é hoje graças a comunidade de usuários que trocam livremente dicas, idéias, opniões e soluções.
Parabéns pela iniciativa.
Julio,
só queria agradecer seu post… depois de tempos e tempos com problemas no AJAX finalmente consegui resolver meu problema de acentuação!!!!
Valeus mesmo!!
Show de bola!
Pequeno problema resolvido.. usei as 2.. tanto a header quanto a do $_POST e tudo certo!
vlw a dica.
Colegas.. problemas.. vamos ver se a rapaziada pode me ajudar…
partindo do princípio que:
estou utilizando AJAX em uma layer, aquelas com fundo preto transparente, sobreposta ao site e tals.. enfim, tudo certo. Coloco 100% na layer ao clicar, e em seguida executo o ajax chamando para o div que está dentro de um form que por sua vez está dentro desta layer. Simples, uma layer, form e div.
Abre tudo certinho. Quando chamo uma pagina qualquer para dentro, atualiza tudo certo também.. somente a telinha, rapido sem tirar o usuário do foco.
Então vamos ao problema.
Estou utilizando formulários nesta tela.
No IE, tudo 100% funcionando, envia, valida, volta se tiver erro em algum campo, se não prossegue.
Porém no Firefox, não consegue identificar os campos dentro do form. No próprio codigo JS coloquei para exibir “alert(document.getElementById(“Tela”).enctype);” e apareceu certinho, mais ao colocar “alert(document.getElementById(“Tela”).length);” ele sempre exibe 0, mesmo depois de enviar o form. Lembro que no IE esta funcionado.
Executei alguns testes e me parece que no firefox é como se não tivesse carregado a pagina pra dentro do div, pois não identifica os campos contidos na página requisitada. O form está fora da div, talvez por isso funcione a propriedade “enctype”. Vale lembrar que ele carrega a pagina corretamente dentro do div no firefox, o unico problema é que não reconhece os campos que estão dentro da página requisitada.
Alguem tem alguma idéa do porque disto?
Acontece usando qualquer um dos codigos cedidos pela rapaziada.. fsajax, ajaxgo e por ai vai.. todos acontece isso no firefox.
Aguardo ajuda..
Bem usei e funciona 100% menos no IE nele a primeira vez que executa roda fino, porém se fizer a requisição novamente não funciona…
Boa tarde.
Você poderia me mandar um exemplo deste código com os arquivos pra que eu possa estudalos e modificar pro meu dia-a-dia.
Obrigado
boa tarde, sobre o content-length, aparentemente não se pode mandar simplemente params.length. tentei, e ele nao mostra nada na tela… porque será?
alem disso, se colocar “0″, ele roda…
alguem teria uma explicação sobre isto?
obrigado
muito bom o seu post.. bom pelo menos resolveu pra mim.. grato