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!!!
Opa. Muito bom cau.
O Leandro também fez algo do tipo: http://www.leandromerces.org/blog/2006/08/24/lmxhttpget/
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.
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+
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…
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