Não, o Javascript não faz isso… você precisa de um script de servidor (tipo ASP, PHP, etc.) para receber e tratar esses dados.
Isso é verdade, mas uma verdade relativa… a princípio, o Javascript não pode mesmo fazer isso, mas pode ler a URL completa do documento atual.
Tá mas e daí?
Para quem fez essa pergunta, vou primeiro explicar que, como quem quer aprender Javascript já deveria saber, existem dois métodos básicos para enviar dados ao servidor:
- POST
Usando POST, os dados vão embutidos nos headers (cabeçalhos) HTTP que são trocados entre o servidor e o navegador web (escondido do usuário).- GET
Por GET os dados são enviados como parte da URL, após o sinal ‘?’.
Se podemos ler a URL então temos acesso aos dados enviados por GET, bastando tratá-los para poder ler e usar. Vamos dar um exemplo prático, começando pelo envio dos dados.
Podemos simplesmente criar um formulário e definir o atributo "method" para "get", assim:
<p>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" />
</p>
<p>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" />
</p>
<p align="right">
<input type="submit" value="Enviar" />
</p>
</form>
Mas podemos também criar a query string manualmente. Há três funções em Javascript para codificar esses dados:
- escape -> desatualizada. Codifica os dados em hexadecimal
- encodeURIComponent -> codifica uma string para ser enviada (UTF-8)
- encodeURI -> codifica uma URI inteira para ser enviada (UTF-8)
Supondo que os dados são do "joão", com o email "jo@o.com". Nesse caso, o valor enviado pelo formulário seria uma string (iniciada por "?" e seguida por pares nome-valor, unindo o nome ao valor por "=" e um par ao outro por "&") colocada ao final da URI definida na propriedade action do formulário, resultando em algo assim:
file.html?nome=jo%E3o&email=jo@o.com
Mas e se quisermos criar um link dinamicamente?
var email = "jo@o.com";
var file = "file.html";
// aqui precisamos usar a função de codificação
var uri = file + "?nome=" +encodeURIComponent(nome)
+ "&email=" +encodeURIComponent(email);
location.href = uri;
Repare que o resultado do script acima é ligeiramente diferente do anterior (formulário):
file.html?nome=jo%C3%A3o&email=jo%40o.com
Isso ocorre por quê o método nativo utilizado ao submeter um formulário codifica em ASCII hexadecimal e o script acima resulta numa string codificada em UTF-8, que é mais universal. Bem, ok. Os dados foram enviados… vamos recebê-los!
Vamos construir uma função que lê a URI e retorna os pares nome/valor encontrados, na forma de um objeto. A função está toda comentada. Lá vai…
var ret = {}; // objeto a ser retornado
// a URI completa
var uri = location.href;
// se não há query string, retorna nulo
if(!(/\?/.test(uri))) return null;
// separa a query string (o que vem depois de ‘?’)
var qs = uri.split(’?')[1];
// separando os pares nome/valor
var pairs = qs.split(’&’);
// para cada par…
for(var i = 0; i < pairs.length; i++) {
var nv = pairs[i].split(’=');
ret[nv[0]] = decodeURIComponent(nv[1]);
}
return ret;
}
Importante ressaltar que, no caso de haver múltiplos inputs com o mesmo nome, apenas o último irá valer.
Veja aqui um script mais complexo para gerar e receber variáveis GET. Neste há suporte para o método utilizado pelo PHP para trabalhar com grupos de checkboxes (normalmente), onde basta acrescentar ‘[]’ ao nome que será repetido nos inputs, que o sistema receberá esses dados como um array contendo todos os valores dos campos de mesmo nome, terminados por ‘[]’ .
Basta agora atribuir o resultado da função a uma variável, assim:
// _GET agora é um objeto com os valores, assim:
// {’nome’: ‘joão’, ‘email’: ‘jo@ao.com’ }
Como a URL da página está disponível desde o primeiro momento, não é preciso usar o evento onload. Podemos simplesmente executar antes da página carregar.
É isso aí e bom carnaval!!!
Mapa do site
Opa. Muito bom cau.
O Leandro também fez algo do tipo: http://www.leandromerces.org/blog/2006/08/24/lmxhttpget/
Por Micox em 2007-02-14 03:17:48, quarta
Dei uma olhada lá, Mico. é bacana… faz basicamente a mesma coisa.
Valeu irmão, gosto de ler o que vc escreve. É legal saber que passas por aqui de vez em quando.
Por Cau Guanabara em 2007-02-14 03:17:48, quarta
Muito bom toda matéria publicada nesse blog. Conseguiu ser objetivo. Explicação simples de fácil compreensão, principalmente para inciantes como eu. Agradeço por ter a mesma política de open-source. T+
Por Rodrigo em 2007-02-14 03:17:48, quarta
Nossa Cau, este post não pode ter aparecido em uma melhor hora, estava tentando conseguir o efeito que o Wordpress faz usando uma framework como o scriptaculous para, por exemplo, atualizar tabelas e mostrar na tela sem ser recarregado utilizando ajax, mas nunca imaginei em usar o header como javascript. Agora vou tentar fazer e sei uma saída graças a este artigo. Colocarei no meu blog (http://blog.alexandremagno.net) e farei os agradecimentos a você… Adorei as várias soluções, sendo que não consegui pensar em ao menos uma. Um abraço…
Por Alexandre Magno em 2007-02-14 03:17:48, quarta
Pode parecer uma loucura o que estou dizendo, mas só não vou tentar que é de madrugada, mas estou sonhando com a solução… você vai entender
Por Alexandre Magno em 2007-02-14 03:17:48, quarta