JavaScript에서 쿼리 매개변수를 생성하는 방법은 무엇입니까?

이제 질문은 JavaScript를 사용하여 쿼리 매개변수를 생성해야 하는 이유입니다. 실제 사례를 통해 이해해 봅시다.

예를 들어 Amazon 웹사이트를 방문하여 제품을 검색하면 검색어가 URL에 자동으로 추가되는 것을 볼 수 있습니다. 이는 검색 쿼리에서 쿼리 매개변수를 생성해야 함을 의미합니다.

또한 사용자가 드롭다운 옵션에서 값을 선택하도록 허용할 수도 있습니다. 쿼리 매개변수를 생성하고 선택한 값을 기반으로 사용자를 새 URL로 리디렉션하여 결과를 얻을 수 있습니다. 이 튜토리얼에서는 쿼리 매개변수를 생성하는 방법을 배웁니다.

여기에서는 쿼리 매개변수를 생성하는 다양한 예를 살펴보겠습니다.

encodeURIComponent() 메소드 사용

encodeURIComponent() 메소드를 사용하면 URL의 특수 문자를 인코딩할 수 있습니다. 예를 들어 URL에는 공백이 포함되어 있지 않습니다. 따라서 공백 문자를 공백 문자의 인코딩 형식을 나타내는 '%20' 문자열로 바꿔야 합니다.

또한 전체 URL을 인코딩하는 대신 URL의 구성 요소를 인코딩하는 데 encodeURLComponent()가 사용됩니다.

문법

사용자는 다음 구문에 따라 쿼리 매개변수를 생성하고 인코딩된 URI 구성 요소() 메서드를 사용하여 인코딩할 수 있습니다.

으아아아

위 구문에서 key는 쿼리 매개변수에 설정된 키이고, value는 쿼리 매개변수의 특정 키와 관련됩니다. "=" 문자를 사용하여 키와 값을 구분하고 "&" 문자를 사용하여 두 쿼리를 구분합니다.

예 1

아래 예에서는 객체를 생성하고 키-값 쌍을 저장했습니다. 객체의 키와 값을 사용하여 쿼리 매개변수를 생성합니다. 그 후, for-of 루프는 객체를 반복하고 일대일 키-값 쌍을 가져온 다음 EncodedURIComponent() 메서드를 사용하여 인코딩된 문자열을 생성합니다.

마지막으로 쿼리 문자열의 길이와 동일한 하위 문자열 -1을 가져와 마지막 "&" 문자를 제거합니다.

으아아아

예 2

이 예에서는 사용자 입력 데이터를 쿼리 매개변수로 사용합니다. 우리는 사용자로부터 키와 값을 하나씩 가져오는 사용자 입력을 얻기 위해 프롬프트() 메소드를 사용했습니다.

이후에는 encodeURIComponent() 메서드를 사용하여 사용자 입력 값을 사용하여 쿼리 매개변수를 생성합니다.

으아아아

이 튜토리얼에서 사용자는 다양한 데이터에서 쿼리 매개변수를 생성하는 방법을 배웠습니다. 객체 데이터에서 쿼리 매개변수를 생성하는 방법을 배웠습니다. 또한 사용자 입력을 사용하여 쿼리 매개변수를 생성하는 방법을 배웠는데, 이는 웹사이트에 검색 기능을 추가할 때 매우 유용합니다.

위 내용은 JavaScript에서 쿼리 매개변수를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!