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

133

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

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

CNU
источник

Ответы:

189

Ну вот:

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);
Shog9
источник
12
При итерации с forиспользованием hasOwnProperty для обеспечения взаимодействия.
troelskn
3
@troelskn, хороший момент ... хотя в этом случае кому-то пришлось бы расширять Object.prototype, чтобы сломать его, что для начала является довольно плохой идеей.
Shog9
1
@ Shog9 Почему это плохая идея?
Cesar Canassa,
Просто маленькая деталь, но ret может быть постоянным
Алкис Мавридис
87

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'
Эндрю Палмер
источник
1
Определенно чистый и современный подход. Вы также можете позвонить позжеsearchParams.append(otherData)
kano
81

функциональная

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   
Manav
источник
1
Хороший! .map () был реализован в JavaScript 1.6, поэтому его поддерживают почти все браузеры, даже самые старые. Но, как вы можете догадаться, IE не кроме IE 9+. Но не волнуйтесь, есть обходной путь. Источник: developer.mozilla.org/en-US/docs/JavaScript/Reference/…
Аксели Пален,
var data = { bloop1: true, bloop2: "something" }; var url = "https://something.com/?"; var params = encodeData(data); var finalUrl = url + params; // Is this the right use?Должен производить https://www.something.com/?bloop1=true&bloop2=something?
dylanh724
1
@DylanHunt: Ага…
Przemek
38

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

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

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

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

"var1=value&var2=value"

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

Kirby
источник
10

Мы только что выпустили 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()методы.

Мэт Райер
источник
9

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

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
noego
источник
1
Позже я понял, что на самом деле это немного другая версия ответа @manav ниже. Но в любом случае это может быть предпочтительнее для синтаксиса ES6.
noego
1
Прежде всего, вы не кодируете ключи. Кроме того, вы должны использовать encodeURIComponent()вместо encodeURI. О разнице читайте .
Przemek
9

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"
Przemek
источник
8

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

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

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

Паоло Бергантино
источник
6
jQuery.param () принимает объект и преобразует его в строку запроса GET (эта функция лучше соответствует вопросу).
azurkin
5

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

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

pscl
источник
Очень неконкретный ответ.
masterxilo
2

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

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }
Клейтон К.Н. Пассос
источник
-11

Этот поток указывает на некоторый код для экранирования URL-адресов в php. Есть escape()и unescape()который сделает большую часть работы, но вам нужно добавить пару дополнительных вещей.

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;
}
Kibbee
источник
3
encodeURIComponent обрабатывает это и не использует неправильно + для пробела.
AnthonyWJones