Cómo obtener valores de cadena de consulta en JavaScript con URLSearchParams

 

 

 

Como obtener valores de cadena de consulta en javascript con urlsearchparams 1

Acceder y modificar valores de cadenas de consulta mediante URLSearchParams

El protocolo HTTP permite realizar la solicitud a una página web con una cadena de consulta.

Como esto:

https://test.com/?name=rogerhttps://test.com/hello?name=roger

En este caso tenemos un único parámetro de consulta, llamado name, con el valor roger.

Puedes tener múltiples parámetros, como este:

https://test.com/hello?name=rogerage=20

Los parámetros que se pasan como cadena de consulta se utilizan normalmente en el servidor para generar una respuesta adecuada. Aquí se explica cómo acceder a los parámetros de consulta mediante Node.js.

 

Para acceder al valor de la consulta dentro del navegador, usando JavaScript, tenemos una API especial llamada URLSearchParam , compatible con todos los navegadores modernos.

Aquí es cómo podemos usarlo:

const params = new URLSearchParams(window.location.search)

Nota: no pase la URL completa como parámetro a URLSearchParams(), sino solo la parte de la cadena de consulta de la URL, a la que accede usando window.location.search.

En el caso de:

https://test.com/hello?name=roger

window.location.searches igual a la cadena ?name=roger.

Ahora que tienes el paramsobjeto, puedes consultarlo.

Puedes comprobar si se pasó un parámetro:

params.has('test')

Puedes obtener el valor de un parámetro:

params.get('test')

Puedes iterar sobre todos los parámetros, usando for..of:

const params = new URLSearchParams(window.location.search)for (const param of params) { console.log(param)}

Un parámetro puede tener más de un valor.

En este caso, pasamos el mismo nombre de parámetro varias veces, de la siguiente manera:

https://test.com/hello?name=rogername=flavio

No tenemos forma de detectar si se pasa un parámetro más de una vez. Si usamos params.get('name'), solo obtendremos el primer valor. Fotos Porno y actrices porno

Podemos demandar params.getAll('name')para recuperar una matriz con todos los valores pasados.

Además de has(), get()y getAll(), la URLSearchParamsAPI ofrece varios otros métodos que podemos usar para recorrer los parámetros:

  • forEach()itera sobre los parámetros
  • entries()devuelve un iterador que contiene los parámetros clave/valores
  • keys()devuelve un iterador que contiene las claves de los parámetros
  • values()devuelve un iterador que contiene los valores de los parámetros

Otros métodos para alterar los parámetros, para usar en otro JavaScript que se ejecuta en la página (no cambian la URL):

  • append()para agregar un nuevo parámetro al objeto
  • delete()para eliminar un parámetro existente
  • set()para establecer el valor de un parámetro

También tenemos sort()que ordenar los parámetros por valor clave y tenemos el toString()método para generar una cadena de consulta a partir de los valores.

Podemos usar append()// para editar la cadena set()de delete()consulta y generar una nueva con toString().




Tal vez te puede interesar:

  1. Cómo generar un número aleatorio entre dos números en JavaScript
  2. Cómo esperar el evento DOM listo en JavaScript simple
  3. Cómo determinar si una fecha es hoy en JavaScript
  4. Cómo contar el número de propiedades en un objeto JavaScript

Cómo obtener valores de cadena de consulta en JavaScript con URLSearchParams

El protocolo HTTP permite realizar la solicitud a una página web con una cadena de consulta. Acceder y modificar valores de cadenas de consulta mediante URLSe

programar

es

https://aprendeprogramando.es/static/images/programar-como-obtener-valores-de-cadena-de-consulta-en-javascript-con-urlsearchparams-2305-0.jpg

2024-10-17

 

Como obtener valores de cadena de consulta en javascript con urlsearchparams 1
Como obtener valores de cadena de consulta en javascript con urlsearchparams 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences