<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Obter variáveis GET recorrendo a Javascript ⁄ >




clicks: 16633 16633 2007-11-16 2007-11-16 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



Provavelmente este não será um procedimento muito normal, porque geralmente usa-se server-side scripting (que faz todo o sentido e deverão continuar a utilizar :)) para ir obter as variáveis GET (passadas através do url), no entanto tal também poderá ser feito usando client-side scripting, a.k.a, Javascript.


Motivos para os quais isto pode dar jeito? Humm, assim de momento não me recordo de nenhum, mas se alguém tiver uma ideia ... drop me an email ;) Mas pronto, se por algum acaso do destino seja necessário, fica-se a saber que é perfeitamente possivel obter o valor das variáveis.


Na essência tudo se resume ao window.location.href, esta função permite-nos obter o url completo, por ex. "http:.........index.htm?var1=teste&var2=etset......", e como sabemos como é separada a informação (? para a 1ª variável e & para as seguintes), podemos arranjar uma espécie de tokenizer para ir decompondo o url; mas vamos complicar um bocado isto e tornar o código um pouco mais modular, recorrendo a json. Reparem só que a nossa página poderá ser perfeitamente um html estático.


Para tornar isto mais automatizado, vamos então construir um script que faça logo tudo por nós, ou seja, vamos indicar qual o campo do nosso formulário que queremos actualizar e qual o nome da variável correspondente, confuso? Easy!
Supondo que temos um campo com input text com o seguinte nome: "txtNome", vamos querer preencher esse campo, por ex., com o valor da variável "nome=pedrocorreia.net".




Comecemos então pelo javascript necessário à resolução do nosso problema.
- a função GetVar é a responsável por ir buscar uma variável especifica, por ex: nome; telefone; etc, etc;
- a função GetVars fica só como exemplo, mas como o nome indica vai buscar todas as variáveis;

A função AutoFillFields irá ter o trabalho de preencher os campos com o valor especifico da variável, chamaria a especial atenção para esta função. Recebe como parâmetro um objecto json que terá de respeitar uma determinada nomenclatura, isto é, esse objecto terá 2 campos/ propriedades; field e qryStringVar (mais à frente encontra-se o exemplo desse objecto e de como poderá ser construído), a propriedade "field" indica qual o campo que vai ser preenchido com o valor da propriedade "qryStringVar" (variável da query string).

Poderia então ficar mais ou menos o nosso ficheiro;

  1. var HttpGetVars = {
  2.  
  3. //url corrente
  4. current_url: window.location.href,
  5.  
  6. //posição inicial da querystring
  7. paramsStart: window.location.href.indexOf("?"),
  8.  
  9. /**
  10. * Preencher campos
  11. *
  12. * @param Object : objecto com designação do campo e var da query string
  13. */
  14. AutoFillFields : function(fillFields){
  15. var count = fillFields.fields.length;
  16.  
  17. for (var i=0;i<count;i++){
  18. var field=document.getElementById(fillFields.fields[i].field);
  19. if(field){
  20. field.value=this.GetVar(fillFields.fields[i].qryStringVar);
  21. }
  22. }
  23. },
  24.  
  25. /**
  26. * Obter conteúdo da variável da querystring
  27. *
  28. * @param String
  29. * @return String
  30. *
  31. */
  32. GetVar: function(var_name){
  33. if(this.paramsStart != -1){
  34. var paramString = this.current_url.substr(this.paramsStart + 1);
  35. var tokenStart = paramString.indexOf(var_name);
  36.  
  37. if(tokenStart != -1){
  38. paramToEnd = paramString.substr(tokenStart + var_name.length + 1);
  39. var delimiterPos = paramToEnd.indexOf("&");
  40.  
  41. if(delimiterPos == -1){
  42. return paramToEnd;
  43. }
  44. else {
  45. return paramToEnd.substr(0, delimiterPos);
  46. }
  47. }
  48. }
  49.  
  50. },
  51.  
  52. /**
  53. *
  54. * Obter todas as variáveis e respectivos valores
  55. *
  56. */
  57. GetVars : function(){
  58. var params = new Array();
  59. var hasMoreParams = true;
  60.  
  61. if(this.paramsStart != -1){
  62. var paramString = this.current_url.substr(this.paramsStart + 1);
  63. var params = paramString.split("&");
  64.  
  65. var size_params=params.length;
  66.  
  67. for(var i = 0 ; i < size_params ; i++) {
  68. var pairArray = params[i].split("=");
  69.  
  70. if(pairArray.length == 2){
  71. params[pairArray[0]] = pairArray[1];
  72. }
  73. }
  74.  
  75. return params;
  76. }
  77.  
  78. return null;
  79. }
  80.  
  81. }






Vamos então criar um ficheiro de exemplo, bem como o objecto json necessário ao preenchimento da informação.

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="HttpGetVars.js"></script>
  4. <script type="text/javascript">
  5. function init(){
  6. var fieldsToFill = {
  7. fields: [
  8. {field: "txtNome", qryStringVar: "nome"},
  9. {field: "txtTipo", qryStringVar: "tipo"},
  10. ]
  11. }
  12.  
  13. HttpGetVars.AutoFillFields(fieldsToFill);
  14. }
  15.  
  16. window.onload = init;
  17. </script>
  18. </head>
  19. <body>
  20. Nome: <input id="txtNome" name="txtNome">
  21. Tipo: <input id="txtTipo" name="txtTipo">
  22. </body>
  23. </html>



Destacaria somente este código:

var fieldsToFill = {
   fields: [
    {field: "txtNome", qryStringVar: "nome"},
    {field: "txtTipo", qryStringVar: "tipo"},
  ]
}


O array "fields" irá conter todos os campos que vão ser actualizados, bem como a variável GET associada, logo se quisessemos actualizar por ex. um campo chamado "txtTelefone" que tem como correspondencia a variável "num_telefone", bastaria adicionar:
{field: "txtTelefone", qryStringVar: "num_telefone"}



Uma especial nota de atenção, caso estejamos a fazer submissões pelo método GET para a mesma página, teríamos de ter as propriedades "field" e "qryStringVar" iguais, visto que o nome da variável seria igual ao nome do campo, por ex:
{field: "num_telefone", qryStringVar: "num_telefone"}






Qualquer erro/ dúvida é só dizer!









clicks: 16633 16633 2007-11-16 2007-11-16 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This