jQuery 가져오기 URL 매개변수
오늘 포스트에서는 jQuery에서 URL 매개변수를 가져오는 방법을 알아보겠습니다.
jQuery에서 URL 매개변수 가져오기
JavaScript에서 Location 인터페이스의 Search 속성은 쿼리 문자열이라고도 하는 검색 문자열입니다. 즉, ?를 포함하는 문자열입니다. URL 매개변수가 뒤따릅니다.
최신 브라우저에는 URLSearchParams 및 URL.SearchParams가 있어 질문 문자열 매개변수를 구문 분석하는 것이 덜 어렵습니다. URLSearchParams 인터페이스의 get() 기술은 지정된 search 매개변수와 관련된 기본 값을 반환합니다.
통사론:
get(name)
다음의 간단한 예를 통해 이해해 봅시다.
let dummyURL =
'https://delftstack.com/howto/jquery/?technology=jquery&post=urlParameter'
const extractURLParameter = (searchParam) => {
const searchPageURL = dummyURL.split('?')[1];
const searchURLVariables = searchPageURL.split('&');
let searchParameterName;
for (let i = 0; i < searchURLVariables.length; i++) {
searchParameterName = searchURLVariables[i].split('=');
if (searchParameterName[0] === searchParam) {
return searchParameterName[1] === undefined ?
true :
decodeURIComponent(searchParameterName[1]);
}
}
return false;
};
console.log(extractURLParameter('technology'));
console.log(extractURLParameter('post'));
const params =
new URLSearchParams(window.location.search); // pass the dummyURL here
const name = params.get('editor_console');
console.log(name)
위의 예에서는 현재 위치 URL에서 URL 매개변수를 추출하는 일반 함수를 정의했습니다. 위치 인터페이스 검색 속성은 ?로 구분된 값과 URL에서 매개변수를 추출합니다.
다음 단계는 &로 매개변수를 분할하는 것입니다. 이제 각 매개변수를 반복하고 요청한 매개변수가 있는지 여부를 확인할 수 있습니다.
=로 매개변수와 키를 구분할 수 있습니다.
두 번째 대안은 모든 쿼리 매개변수 목록을 제공하는 URLSearchParams 인터페이스를 직접 사용하는 것입니다. Get 메소드는 요청된 매개변수와 연관된 값을 추출합니다.
브라우저가 URLSearchParams를 지원하는 경우 이는 효율적인 솔루션입니다.
jQuery를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 다음 결과가 표시됩니다.
jquery
urlParameter
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn