2010년 1월 28일 목요일

HTML에서 자바스크립트를 이용한 파라메터 주고받기

HTML에서 자바스크립트를 이용한 파라메터 주고받기

 

tmp = window.location;
tmp = String(tmp).split('?'); //현재창의 주소에서 ?이후의 값을 배열에 담는다.
tmp = tmp[1].split('&'); //담긴 값에서 변수별로 분리한다.
 

//확인 및 출력
for(k in tmp){
  tmp2 = tmp[k].split('=')
  eval('var ' + tmp2[0] + '=tmp2[1]');
  alert(tmp2[0] + ' ' + tmp2[1]);
}

 

다른방법은 아래와 같다.

 

 

url prameter 를 javascript 의 json (object)형태로 리턴한다. 간혹 url의 ?로 표시된 prameter를 파싱해서 사용해야할때가 있는데, 이경우 이 function을 이용하면된다. 아래 코드를 살펴보면 알겠지만, url파싱은 처음 호출시에만 하며 이후는 파싱된 object 만을 리턴한다. 이는 개발시 개발되어 테스트된 버전은 아니고, 그냥 생각나서 만들어 본 것으로 이후 버그 발견시 수정될수 있다.

  1. <script type="text/javascript">   
  2. //<![CDATA[      
  3.     /**  
  4.     * getUrlParameter  
  5.     *  
  6.     * @description : 현재 url의 ?로 표기된 parameter 리턴  
  7.     * @author      : blog.byuli.com  
  8.     * @version     : 20081115  
  9.     * @return      : parameter의 object 형태로 리턴  
  10.     */ 
  11.     var getUrlParameter = function (){  
  12.  
  13.         var ParameterObject = new Object();  
  14.         var locate = location.href;  
  15.  
  16.         if(locate.indexOf("?")==-1){  
  17.             return ParameterObject;  
  18.         }  
  19.  
  20.         var parameter = locate.split("?")[1];  
  21.         var paramAreay = parameter.split("&");  
  22.         for ( var i=0; i<paramAreay.length; i++ )  
  23.         {  
  24.             var tem = paramAreay[i].split("=");  
  25.             ParameterObject[tem[0]] = tem[1];  
  26.         }  
  27.         getUrlParameter = function () { return ParameterObject; }  
  28.         return ParameterObject;  
  29.     };  
  30.  
  31. //>]]     
  32. </script>  


사용방법은 아래와 같다. 존재하지 않는 파라메터를 콜 할경우엔 당연히 undifined를 리턴한다. 적절히 붙여 사용하면 유용하겠다.

  1. <script type="text/javascript">   
  2. //<![CDATA[    
  3.     for(var ele in getUrlParameter())  
  4.     {  
  5.         document.write(ele + " : '" + getUrlParameter()[ele] + "'<br/>");  
  6.     }  
  7.     
  8.     document.write(getUrlParameter().id + "<br/>");  
  9.  
  10. //>]]     
  11. </script>  

댓글 없음:

댓글 쓰기