¿Cómo crear parámetros de consulta en Javascript?

¿Hay alguna forma de crear los parámetros de consulta para hacer una solicitud GET en JavaScript?

Al igual que en Python urllib.urlencode(), tiene un diccionario (o una lista de dos tuplas) y crea una cadena como 'var1=value1&var2=value2'.

Aqui 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);

URLSearchParams tiene una mayor compatibilidad con el navegador.

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.js ofrece el módulo de cadena de consulta .

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

funcional

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   

Zabba 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()los datos en la pregunta original, entonces el código es simplemente:

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

La variable paramsserá

"var1=value&var2=value"

Para ver ejemplos, entradas y salidas más complicadas, consulte la documentación de jQuery.param () .

Acabamos de lanzar arg.js , un proyecto destinado a resolver este problema de una vez por todas. Tradicionalmente ha sido muy difícil, pero ahora puedes hacer:

var querystring = Arg.url({name: "Mat", state: "CO"});

Y la lectura funciona:

var name = Arg("name");

o obtener todo el lote:

var params = Arg.all();

y si le importa la diferencia entre ?query=truey #hash=truepuede usar los métodos Arg.query()y Arg.hash().

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

ES2017 (ES8)

Haciendo uso de Object.entries(), que devuelve una matriz de [key, value]pares de objetos . Por ejemplo, porque {a: 1, b: 2}volvería [['a', 1], ['b', 2]]. No es compatible (y no será) solo por 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"

Si está utilizando Prototype, hay Form.serialize

Si está utilizando jQuery, hay Ajax / serialize

Sin embargo, no conozco ninguna función independiente para lograr esto, pero una búsqueda en Google para encontrar algunas opciones prometedoras si actualmente no está utilizando una biblioteca. Sin embargo, si no lo eres, realmente deberías porque son el cielo.

Solo me gustaría volver a esta pregunta de hace casi 10 años. En esta era de programación estándar, su mejor opción es configurar su proyecto utilizando un administrador de dependencias (npm ). Existe toda una industria artesanal de bibliotecas que codifican cadenas de consulta y se ocupan de todos los casos extremos. Este es uno de los más populares:

https://www.npmjs.com/package/query-string

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()cuál hará la mayor parte del trabajo, pero necesita 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;
}