Este blog definirá el procedimiento para obtener los valores de la cadena de consulta en JavaScript.
¿Cómo obtener valores de cadena de consulta en JavaScript?
Para obtener los valores de la cadena de consulta en JavaScript, use los siguientes métodos:
- Utilice la API de URL con el método get()
- URLSearchParams con el método get()
- URLSearchParams con el método de valores ()
Método 1: obtener valores de cadena de consulta mediante la API de URL con el método get()
Utilizar el ' API de URL ' con el ' conseguir() ” para obtener los valores de la cadena de consulta en JavaScript. Una URL (Localizador uniforme de recursos) es una forma de encontrar un recurso de Internet específico. Por lo general, se compone de un protocolo (como ' http ' o ' https “), un nombre de dominio (como “ example.com “), y una ruta (como “ /ruta/al/recurso “). Las direcciones URL se utilizan para acceder a páginas web, descargar archivos y acceder a otros recursos, incluidos los valores de cadena de consulta en Internet.
Ejemplo
Cree una variable que almacene la URL con cadenas de consulta:
estaba urlCadena de consulta = 'https://www.example.com/page.html?keyword=SearchText &fullname=jennyConvey &click=Submit' ;
Llame al objeto URL pasando el ' urlCadena de consulta ”:
estaba cadena de consulta = nuevo URL ( urlCadena de consulta ) ;
Utilice el método get() pasando la clave ' palabra clave ” de la consulta para obtener su valor con el atributo searchParams. La propiedad searchParams del objeto URL en JavaScript representa la cadena de consulta de una URL. Proporciona una forma de manipular la cadena de consulta de una URL como un objeto en lugar de una cadena:
estaba valor1 = cadena de consulta. Parámetros de búsqueda . conseguir ( 'palabra clave' ) ;consola. Iniciar sesión ( 'valor de la palabra clave: ' + valor1 ) ;
Obtenga el segundo valor de la cadena de consulta pasando su clave al método get() e imprímalo en la consola:
estaba valor2 = cadena de consulta. Parámetros de búsqueda . conseguir ( 'nombre completo' ) ;
consola. Iniciar sesión ( 'valor del nombre completo: ' + valor2 ) ;
Del mismo modo, obtenga el tercer valor en la cadena:
estaba valor3 = cadena de consulta. Parámetros de búsqueda . conseguir ( 'hacer clic' ) ;consola. Iniciar sesión ( 'valor del clic:' + valor3 ) ;
Se puede ver que los valores de la cadena de consulta se han recuperado con éxito:
Método 2: obtener valores de cadena de consulta mediante URLSearchParams con el método get()
Él ' URLSearchParams La interfaz ” se puede usar en JavaScript para recuperar los valores de la cadena de consulta. Evalúa la cadena de consulta de una URL y ofrece un medio para acceder a los valores. Tenga en cuenta que solo debe enviar la parte de la cadena de consulta de la URL, que puede recuperar utilizando el ' window.location.search ” como parámetro de URLSearchParams().
Ejemplo
Cree una variable que almacene la cadena de consulta:
Pase la cadena al ' URLSearchParams ' interfaz:
estaba cadena de consulta = nuevo URLSearchParams ( urlCadena de consulta ) ;Obtener el valor de la clave “ nombre completo ” de la cadena de consulta usando el “ conseguir() ' método:
estaba valor1 = cadena de consulta. conseguir ( 'nombre completo' ) ;consola. Iniciar sesión ( 'valor del nombre completo: ' + valor1 ) ;
Producción
Nota : Utilizar ' const queryString = new URLSearchParams(ventana.ubicación.búsqueda) ” para obtener la URL en vivo/actual.
Después de obtener la URL actual, obtenga la cadena de consulta, cree una instancia de URLSearchParams y pásele la cadena de consulta. Finalmente, obtenga el valor de un parámetro específico en la cadena de consulta usando el método get().
Método 2: obtener valores de cadena de consulta mediante URLSearchParams con el método de valores ()
También puede utilizar el ' valores() ” con la interfaz URLSearchParams para recuperar los valores de la cadena de consulta. Ayuda a acceder a todos los valores de la cadena a la vez.
Ejemplo
Pase la cadena de consulta a la interfaz URLSearchParams y guárdela en una variable ' cadena de consulta ”:
Llame al método de valores () en el ' por ” bucle para obtener todos los valores de la cadena de consulta:
por ( constante valor de queryString . valores ( ) ) {consola. Iniciar sesión ( valor ) ;
}
Se puede observar que se han obtenido todos los valores de cadena:
Se trata de obtener los valores de la cadena de consulta en JavaScript.
Conclusión
Para obtener los valores de la cadena de consulta, use el ' API de URL ' con el ' conseguir() ” método y “ parámetro de búsqueda ' atributo. La propiedad searchParams del objeto URL en JavaScript representa la cadena de consulta de una URL. También puede utilizar el ' URLSearchParams ” interfaz con el “ conseguir() ” método o “ valores() ' método. Este blog describió el procedimiento para obtener los valores de la cadena de consulta en JavaScript.