Web/기타
자바스크립트에서 URL 제어
- -
자바스크립트에서는 location 객체가 url을 담당한다.
다음 페이지에서 location 객체가 갖는 속성에 대해 살펴볼 수 있다.
https://www.w3schools.com/jsref/obj_location.asp
Location Object
The Location Object Location Object The location object contains information about the current URL. The location object is part of the window object and is accessed through the window.location property. Note: There is no public standard that applies to the
www.w3schools.com
location의 속성 중 search 속성은 url의 ? 뒤쪽 즉 파라미터 부분을 나타낸다.
예를들어 http://localhost:8080/bootstraptest/detail.html?code=1&name=hong 과 같은 URL이 있을 때 ?code=1&name=hong이 search 속성이다.
자바스크립트에서 search 속성의 각 파라미터에 접근하려할 때 지저분한 파싱을 하거나 정규 표현식을 이용해야 했는데 URLSearchParams라는 객체를 사용하면 아주 편하게 파라미터를 사용할 수 있다. 다음 링크를 살펴보자.
https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams
URLSearchParams
URLSearchParams 인터페이스는 URL의 Query 문자열을 다루는 메소드의 정의 입니다.
developer.mozilla.org
간단하게 master -> detail로 호출하는 구조를 만들고 파라미터를 확인해보자.
먼저 master.html 페이지에는 식품의 목록을 detail.html로 가는 링크로 제공한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="/bootstraptest/detail.html?code=1&name=메롱">메로나</a>
<a href="/bootstraptest/detail.html?code=2&name=아메">아메리카노</a>
</body>
</html>
다음으로 detail.html 페이지를 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<label for="code">코드명</label>
<input id="code"><br>
<label for="name">상품명</label>
<input id="name">
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
let params = new URLSearchParams(location.search);
for(let p of params){
//console.log(p[0], p[1])
$("#"+p[0]).val(p[1]);
}
</script>
</html>스크립트 부분을 살펴보면 location.search 값을 이용해서 URLSearchParams를 생성하고 전달된 파라미터를 사용하는 것을 볼 수 있다. URLSearchParams에는 entity라는 것들이 담겨있는데 반복문은 이 entity들을 순회한다. 각 entity에는 [파라미터이름, 파라미터 값] 형태의 배열로 구성되어있다.
전달받은 내용을 화면에 반영하면 아래와 같은 회면을 볼 수 있다.
인코딩에 대해서도 신경쓸 필요가 없이 아주 좋다. 한가지 아쉽다면 데이터를 JSON의 형태로 줬으면 좋겠다는 소박한 바람이 ...
Contents
소중한 공감 감사합니다