prototype.js로 URL의 쿼리스트링 값 가져오기 (parseQuery,toQueryParams)

GET방식의 호출을 하면 주소뒤에 ?id=3&nick=outsider 같은 형식의 쿼리스트링이 붙는다. 이런 부분은 JSP나 ASP에서는 request객체를 이용해서 가져올 수 있지만 Javascript에서 이것을 다뤄야 할 때도 있다.

window.location.search

를 이용하면 ?id=3&nick=outsider라는 쿼리스트링이 그대로 튀어나온다. 이걸 그대로 가공해서 사용해도 되지만 prototype.js는 이걸 위한 메서드를 제공한다. (window.location.search는 prototype.js에서 제공하는 것은 아니고 javascript에서 제공하는 것이다.)

parseQuery()

toQueryParams()

Prototype Framework의 API문서 를 보면 parseQuery()은 "toQueryParams()의 별칭"이라고 나온다. 결국 기능은 toQueryParams()만 있는건데 쿼리스트링을 파라미터와 값의 쌍으로 된 Object를 리턴해 준다. API문서 에 자세한 예시들이 있기 때문에 보면 금방 이해가 될 것이다.(사이트 개편된뒤로 API문서나

만약 http://www.test.com/test/test.jsp??id=3&nick=outsider 라고 호출했을 경우 다음 코드를 실행하면 주석해 보시된 내용의 값을 출력해 준다.

1
2
3
4
5
6

//var params = window.location.search.parseQuery();
var params = window.location.search.toQueryParams();

alert(window.location.search); // ?id=3&nick=outsider
alert(params.id);                    // 3
alert(params.nick);                 // outsider

1번과 2번줄은 아무것이나 사용해도 차이가 없다.

만약 정의되지 않거나 값이 없는 파라미터를 가져오려고 하면 undefined가 나온다.