Как создать параметры запроса в Javascript?

Question

Есть ли способ создать параметры запроса для выполнения GET-запроса в JavaScript?

Как и в Python, у вас есть urllib.urlencode(), который берет словарь (или список из двух кортежей) и создает строку типа 'var1=value1&var2=value2'.

Answer 1

Вот, пожалуйста:

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

Использование:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

Answer 2

функциональный

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

Answer 3

Забба предоставил в комментарии к принятому в настоящее время ответу предложение, которое для меня является лучшим решением: используйте jQuery.param () .

Если я использую jQuery.param() для данных в исходном вопросе, то код просто:

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

Переменная params будет

"var1=value&var2=value"

Более сложные примеры, входы и выходы см. В документации jQuery.param () .

Answer 4

URLSearchParams имеет расширенную поддержку браузера.

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

const searchParams = new URLSearchParams(data);

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

Node.js предлагает модуль querystring .

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

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

Answer 5

Мы только что выпустили arg.js , проект, направленный на решение этой проблемы раз и навсегда. Традиционно это было так сложно, но теперь вы можете сделать:

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

И чтение работает:

var name = Arg("name");

или получение всего лота:

var params = Arg.all();

и если вас волнует разница между ?query=true и #hash=true, вы можете использовать методы Arg.query() и Arg.hash().

Answer 6

Это должно сделать работу:

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

Пример:

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

Результат:

name=John&postcode=W1%202DL

Answer 7

Если вы используете Прототип , существует Form.serialize

Если вы используете jQuery , существует Ajax / serialize

Я не знаю каких-либо независимых функций для достижения этой цели, но поиск в Google нашел некоторые многообещающие варианты, если вы в настоящее время не используете библиотеку. Если вы этого не сделаете, то вам действительно следует это сделать, потому что они небеса.

Answer 8

ES2017 (ES8)

Использование Object.entries(), которое возвращает массив пар [key, value] объекта. Например, для {a: 1, b: 2} будет возвращено [['a', 1], ['b', 2]]. Он не поддерживается (и не будет) только в IE.

Код:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

Пример:

buildURLQuery({name: 'John', gender: 'male'});

Результат:

"name=John&gender=male"

Answer 9

Точно так же, как вернуться к этому почти 10-летнему вопросу. В эту эпоху готовых программ лучше всего настроить свой проект с помощью менеджера зависимостей (npm). Существует целая индустрия библиотек, которые кодируют строки запросов и заботятся обо всех крайних случаях. Это один из самых популярных -

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

Answer 10

Небольшая модификация машинописи:

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }