javascript로 특정 URL 값 가져오는 방법

개인 프로젝트를 진행하던 중 검색 페이지에서 select로 된 값을 검색 결과 페이지로 그 검색어를 가져오는 것을 구현하려고 한다. 가령 검색 페이지에 서울, 경기, 강원 등의 지역을 선택할 수 있는 검색창이 있고 값을 선택하면 검색 결과 페이지로 이동하여 'searchResult.html?vaule="서울"' 이라는 URL이 표시된다. 그래서 검색 결과 페이지에 서울 이라는 값을 가지고 오는 것을 구현하고자 한다.

 

window.location.href

javascript는 URL를 보여주는 객체가 있다. 바로 window.location.href이다. 이 객체를 크롬이나 다른 브라우저 console창에 가서 입력하면 주소가 출력된다. 이외에도 hostname, pathname, protocol등을 가지고 올 수 있다.

 

검색 페이지 HTML

<select id="searchOption">
	<option value="">--지역--</option>
    	<option value="서울">서울</option>
    	<option value="경기">경기</option>
    	<option value="강원">강원</option>
</select>

검색 페이지에서는 select ~ option을 이용해서 서울, 경기, 강원 중 한가지를 선택하면 검색 결과 페이지로 이동하고자 한다.

 

JavaScript

const searchOption = documeny.querySelector('#searchOption');

const handleSearchResult = () =>{
	const value = searchOption.options[searchOption.selectedIndex].value;
    	location.href = `searchResult.html?value=${value}`;
}

searchOption.addEventListener("change",handleSearchResult);

Javascript는 ES6을 사용하여 구현했다. searchOption id를 searchOption변수에 저장한다. 그리고 값이 변경되었을 때 발생하는 이벤트인 change를 사용하여 함수를 실행하도록 했다.

함수의 내용은 선택된 option의 value값을 value에 저장하고 이를 value값을 포함하여 searchResult.html으로 이동하도록 구현했다.

 

다음은 검색 결과 페이지에서 그 값을 가지고 오는 것을 구현했다.

 

HTML

<h1 id="ResultValue">value</h1>

JavaScript

const resultValue = document.querySelector('#resultValue');
const realValue = decodeURIComponent(window.location.href).split("value=")[1];
resultValue.innerText = realValue;

decodeURIComponent를 쓰는 이유는 한글이 깨지는 것을 정상으로 만들기 위한 것이다. 쉽게 설명하자면, 검색 결과 페이지에서 url을 보면 '%20%11%2F'이런식으로 되어있는 것을 볼 수 있다. 이를 한글로 만들기 위해 디코딩하는 작업이 필요한데 그것이 바로 decodeURIComponent이다. split은 배열형식으로 문자열을 쪼개는 역할을 한다. 만약, url주소가 main.html?value="서울"이런식으로 되어있고 서울이라는 문자열을 가지고 오고 싶을 때 window.location.href.split("value=")[1]이라고 쓰면 서울이라는 문자열을 출력할 것이다. [1]을 쓰는 이유는 배열 형식으로 되어있고 [0]번째는 main.html?이다. 즉, value=를 제외하고 보여준다고 보면 된다.

 

innerText는 그 텍스트로 변경한다는 뜻이다. 즉, 원래의 value가 아닌 realValue, 서울로 변경하여 출력된다는 뜻이다.

이 글을 공유하기

댓글

Designed by JB FACTORY