Как построить строку запроса с Javascript

Question

Просто интересно, есть ли что-нибудь встроенное в Javascript, которое может взять Form и вернуть параметры запроса, например: "var1 = value & var2 = value2 & arr [] = foo & arr [] = bar ..."

Мне было интересно это годами.

Answer 1

без jQuery

var params = {
    parameter1: 'value_1',
    parameter2: 'value 2',
    parameter3: 'value&3' 
};

var esc = encodeURIComponent;
var query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');

Для браузеров, которые не поддерживают синтаксис функции стрелок, для которых требуется ES5, измените строку .map... на

    .map(function(k) {return esc(k) + '=' + esc(params[k]);})

Answer 2

Если вы используете jQuery, вы можете проверить jQuery.param() http://api.jquery.com/jQuery.param/

Пример:

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
​var query = $.param(params);
document.write(query);

Answer 3

Это не дает прямого ответа на ваш вопрос, но вот общая функция, которая создаст URL, содержащий параметры строки запроса. Параметры (имена и значения) безопасно экранируются для включения в URL.

function buildUrl(url, parameters){
  var qs = "";
  for(var key in parameters) {
    var value = parameters[key];
    qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
  }
  if (qs.length > 0){
    qs = qs.substring(0, qs.length-1); //chop off last "&"
    url = url + "?" + qs;
  }
  return url;
}

// example:
var url = "http://example.com/";

var parameters = {
  name: "George Washington",
  dob: "17320222"
};

console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222

Answer 4

С помощью jQuery вы можете сделать это по $.param

$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"

Answer 5

Для этого есть API, в частности, URLSearchParams API . Для приведенного примера:

const params = new URLSearchParams();
const formvals = {
   var1: "value",
   var2: "value2",
   arr: "foo",
};
for (const [key, val] of Object.entries(formvals)) {
   params.append(key, val);
}
console.log(params.toString());
// var1=value&var2=value2&arr=foo

Примечание: В настоящее время довольно совместимо с Chrome и Firefox, но будьте осторожны, если вам нужна работа с браузерами Microsoft и Apple, поскольку совместимость является частичной.

Answer 6

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 7

Нет, я не думаю, что в стандартном JavaScript это встроено, но в Prototype JS есть эта функция (конечно, в большинстве других сред JS тоже есть, но я их не знаю), они называют ее serialize .

Я могу порекомендовать Prototype JS, он работает вполне нормально. Единственный недостаток, который я действительно заметил, это его размер (несколько сотен килобайт) и объем (много кода для ajax, dom и т. Д.). Таким образом, если вам нужен только сериализатор форм, это излишне, и, строго говоря, если вы хотите, чтобы это была только функциональность Ajax (в основном это то, для чего я его использовал), это излишне. Если вы не будете осторожны, вы можете обнаружить, что он делает слишком много «магии» (например, расширяет каждый элемент dom, которого он касается, с помощью функций Prototype JS просто для поиска элементов), делая его медленным в экстремальных случаях.

Answer 8

строка запроса может помочь.

Итак, вы можете

const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)

Answer 9

Если вы не хотите использовать библиотеку, она должна охватывать большинство / все одинаковые типы элементов формы.

function serialize(form) {
  if (!form || !form.elements) return;

  var serial = [], i, j, first;
  var add = function (name, value) {
    serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
  }

  var elems = form.elements;
  for (i = 0; i < elems.length; i += 1, first = false) {
    if (elems[i].name.length > 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j < elems[i].options.length; j += 1)
            if (elems[i].options[j].selected) {
              add(elems[i].name, elems[i].options[j].value);
              if (first) break; /* stop searching for select-one */
            }
          break;
        case 'checkbox':
        case 'radio': if (!elems[i].checked) break; /* else continue */
        default: add(elems[i].name, elems[i].value); break;
      }
    }
  }

  return serial.join('&');
}

Answer 10

На самом деле вам не нужна форма, чтобы сделать это с Prototype. Просто используйте функцию Object.toQueryString :

Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'