¿Cómo crear parámetros de consulta en Javascript?
-
02-07-2019 - |
Pregunta
¿Hay alguna manera de crear el parámetros de consulta por hacer un OBTENER solicitud en JavaScript?
Al igual que en Python tienes urllib.urlencode()
, que toma un diccionario (o una lista de dos tuplas) y crea una cadena como 'var1=value1&var2=value2'
.
Solución
Aquí tienes:
function encodeQueryData(data) {
const ret = [];
for (let d in data)
ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
return ret.join('&');
}
Uso:
const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);
Otros consejos
funcional
function encodeData(data) {
return Object.keys(data).map(function(key) {
return [key, data[key]].map(encodeURIComponent).join("=");
}).join("&");
}
Zaba ha proporcionado en un comentario sobre la respuesta actualmente aceptada una sugerencia que para mí es la mejor solución:usar jQuery.param().
si uso jQuery.param()
sobre los datos de la pregunta original, entonces el código es simplemente:
const params = jQuery.param({
var1: 'value',
var2: 'value'
});
La variable params
será
"var1=value&var2=value"
Para ejemplos, entradas y salidas más complicados, consulte la jQuery.param() documentación.
Parámetros de búsqueda de URL tiene cada vez más soporte para navegadores.
const data = {
var1: 'value1',
var2: 'value2'
};
const searchParams = new URLSearchParams(data);
// searchParams.toString() === 'var1=value1&var2=value2'
Node.js ofrece la cadena de consulta módulo.
const querystring = require('querystring');
const data = {
var1: 'value1',
var2: 'value2'
};
const searchParams = querystring.stringify(data);
// searchParams === 'var1=value1&var2=value2'
Acabamos de lanzar arg.js, un proyecto destinado a solucionar este problema de una vez por todas.Tradicionalmente ha sido muy difícil, pero ahora puedes hacerlo:
var querystring = Arg.url({name: "Mat", state: "CO"});
Y la lectura funciona:
var name = Arg("name");
o conseguir el lote completo:
var params = Arg.all();
y si te importa la diferencia entre ?query=true
y #hash=true
entonces puedes usar el Arg.query()
y Arg.hash()
métodos.
Esto debería hacer el trabajo:
const createQueryParams = params =>
Object.keys(params)
.map(k => `${k}=${encodeURI(params[k])}`)
.join('&');
Ejemplo:
const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)
Resultado:
name=John&postcode=W1%202DL
Si estas usando Prototipo hay Formulario.serializar
Si estas usando jQuery hay Ajax/serializar
Sin embargo, no conozco ninguna función independiente para lograr esto, pero una búsqueda en Google arrojó algunas opciones prometedoras si actualmente no estás usando una biblioteca.Sin embargo, si no es así, deberías hacerlo porque son el paraíso.
Solo me gustaría volver a revisar esta pregunta de hace casi 10 años.En esta era de programación estándar, lo mejor que puede hacer es configurar su proyecto utilizando un administrador de dependencias (npm
).Existe toda una industria artesanal de bibliotecas que codifican cadenas de consulta y se encargan de todos los casos extremos.Este es uno de los más populares.
ES2017 (ES8)
Haciendo uso de Object.entries()
, que devuelve una matriz de objetos [key, value]
pares.Por ejemplo, para {a: 1, b: 2}
volvería [['a', 1], ['b', 2]]
.No es compatible (y no lo será) solo con IE.
Código:
const buildURLQuery = obj =>
Object.entries(obj)
.map(pair => pair.map(encodeURIComponent).join('='))
.join('&');
Ejemplo:
buildURLQuery({name: 'John', gender: 'male'});
Resultado:
"name=John&gender=male"
Una pequeña modificación al mecanografiado:
public encodeData(data: any): string {
return Object.keys(data).map((key) => {
return [key, data[key]].map(encodeURIComponent).join("=");
}).join("&");
}
Este hilo apunta a algún código para escapar de URL en php.hay escape()
y unescape()
que hará la mayor parte del trabajo, pero necesitas agregar un par de cosas adicionales.
function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}
function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}