[JS / Javascript] 특정 id를 누르면 URL에 파라미터 입력 후 이동하기 Using javascript click id href activate code url.searchParams.set('parameter_name', value);

JavasScript 자바 스크립트

버튼이 아닌 요소를 클릭

보통 다른 링크로 이동을 할때, href를 많이 쓰는데 href에 여러가지 파라미터값을 넣어서 원하는 페이지를 불러올 수 있다.

파라미터는 보통 필터값이나, 페이지 값 또는 오름차순 내림차순을 표현할때도 많이 사용한다.

ex) 구글에서 "javascript"로 검색하면 아래 URL이 동작하는 것이다.

https://www.google.com/search?q=javascript

 

그런데 a나 button형태가 아닌 다른 요소들(div,th, td 등)을 클릭했을때도 파라미터 값을 현재 url뒤에 붙이고 바로 이동하도록 한다면 어떻게 해야할까?

 

 

---

 

 

JS 예시코드

 

<table class="table main" style="table-layout: fixed; height:500px;">
<thead>
	<tr>
		<th id="number-sort">Number</th>
    </tr>
    
</thead>
<tbody>
	<tr>
     	<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
</tbody>
</table>

<script>
const thElements = document.querySelectorAll('th[id$="-sort"]');

thElements.forEach((th) => {
  th.style.cursor = 'pointer';
  th.addEventListener('click', () => {
    const sortColumn = th.id.replace('-sort', '');
    let sortOrder;

    const sortColumn = th.id.replace('-sort', '');
    const url = new URL(window.location.href);
    const currentSortOrder = url.searchParams.get('sort_order');

    if (!currentSortOrder) {
      sortOrder = 'asc';
    } else {
      sortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
    }
    url.searchParams.set('sort_column', sortColumn);
    url.searchParams.set('sort_order', sortOrder);
    url.searchParams.set('page', 1);

    window.location.href = url.toString();
  });
});
</script>

 

위 JS를 해석해보자.

//thElements 변수를 지정한다, 모든 th들의 id들중에 id=="-sort"인 것들을 가져온다. ex) number-sort

const thElements = document.querySelectorAll('th[id$="-sort"]');

//forEach를 사용하여 위에서 구한 th들중 id에 -sort가 있는 것들을 1개씩 불러온다. python으로 치자면 for th in thElements이다
thElements.forEach((th) => {

 

//해당 th를 클릭하면 {}안의 코드가 실행된다.
th.addEventListener('click', () => {
  });

{
	//id에서 -sort를 제거하고 남아있는것을 sortColumn에 넣는다.
    const sortColumn = th.id.replace('-sort', '');
    
    //data-sort를 지정하기전에 sort_order값이 있는지 없는지를 먼저 검증해야 한다.
    let sortOrder;

	//현재 사용자가 보고 있는 페이지의 URL을 가져온다.
    const url = new URL(window.location.href);
    //위의 URL에 sort_order파라미터가 있는지 없는지 확인한다.
    const currentSortOrder = url.searchParams.get('sort_order');

	
	//만일 sort_order가 없을경우 해당 파라미터의 값은 'asc'로 있는데 'asc'라면 'desc'로 'desc'면 'asc'로 트리거처럼 동작하도록 한다.
    
    if (!currentSortOrder) {
      sortOrder = 'asc';
    } else {
      sortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
    }
    
    
    //searchParams를 사용하여 파라미터이름과 해당 파라미터에 들어갈 값을 입력한다.
    //문자형,숫자형 상관없이 모두 넣을 수 있다.
    url.searchParams.set('sort_column', sortColumn);
    url.searchParams.set('sort_order', sortOrder);
    url.searchParams.set('page', 1);


	//이렇게 파라미터가 입력된 URL로 이동한다.
    window.location.href = url.toString();
}

 

 

---

 

 

요약

1) 현재 URL을 구한다. const url = new URL(window.location.href);
(아니면 그냥 "https://url"로 직접 입력해도 된다. ex) const url = "https://google.com"

2) 구한 URL뒤에 파라미터를 입력한다. url.searchParams.set('파리미터_이름', 값);
ex) url.searchParams.set("q","javascript"). -> https://google.com?q="javascript" 

3) window.location.href = url.toString();
이렇게 만들어진 url로 페이지를 이동한다.

 

---

 

set이 파라미터값 설정이라면, get은 특정 파라미터의 값을 가져오는 것이다.

이를 활용하면 현재 페이지의 특정 파라미터값들을 가져와 활용할 수 있다는 것이다.

const target_parameter = url.searchParams.get("Target_Params")

 

 

끝.