Кодировка строки запроса объекта Javascript - PullRequest
Новая
       106

Кодировка строки запроса объекта Javascript

413 голосов
/ 11 ноября 2009

Знаете ли вы быстрый и простой способ кодирования объекта Javascript в string, который я могу передать через GET запрос?

Нет jQuery, никаких других фреймворков - просто Javascript:)

Ответы [ 33 ]

735 голосов
/ 11 ноября 2009

как это? 

serialize = function(obj) {
  var str = [];
  for (var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

console.log(serialize({
  foo: "hi there",
  bar: "100%"
}));
// foo=hi%20there&bar=100%25

Редактировать: этот также конвертирует рекурсивные объекты (используя нотацию php "array" для строки запроса) 

serialize = function(obj, prefix) {
  var str = [],
    p;
  for (p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p,
        v = obj[p];
      str.push((v !== null && typeof v === "object") ?
        serialize(v, k) :
        encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&");
}

console.log(serialize({
  foo: "hi there",
  bar: {
    blah: 123,
    quux: [1, 2, 3]
  }
}));
// foo=hi%20there&bar%5Bblah%5D=123&bar%5Bquux%5D%5B0%5D=1&bar%5Bquux%5D%5B1%5D=2&bar%5Bquux%5D%5B2%5D=3
218 голосов
/ 15 декабря 2011

jQuery имеет функцию для этого, jQuery.param(), если вы уже используете ее, вы можете использовать это: http://api.jquery.com/jquery.param/

пример: 

var params = { width:1680, height:1050 };
var str = jQuery.param( params );

str теперь содержит width=1680&height=1050

116 голосов
/ 08 августа 2013 
Object.keys(obj).reduce(function(a,k){a.push(k+'='+encodeURIComponent(obj[k]));return a},[]).join('&')

Редактировать: мне нравится этот однострочный, но держу пари, что он будет более популярным, если он семантически соответствует принятому ответу: 

function serialize( obj ) {
    let str = '?' + Object.keys(obj).reduce(function(a, k){
        a.push(k + '=' + encodeURIComponent(obj[k]));
        return a;
    }, []).join('&');
    return str;
}
100 голосов
/ 15 февраля 2016

Вот один вкладыш в ES6: 

Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');
42 голосов
/ 07 июля 2016

с Node.js v6.6.3 

const querystring = require('querystring')

const obj = {
  foo: 'bar',
  baz: 'tor'
}

let result = querystring.stringify(obj)
// foo=bar&baz=tor

Ссылка: https://nodejs.org/api/querystring.html

33 голосов
/ 17 июня 2017

Я предлагаю использовать URLSearchParams интерфейс: 

const searchParams = new URLSearchParams();
const search = {foo: "hi there", bar: "100%" };
Object.keys(search).forEach(key => searchParams.append(key, search[key]));
console.log(searchParams.toString())
27 голосов
/ 06 ноября 2018

Можете ли вы использовать URLSearchParams?

просто new URLSearchParams(object).toString()

Chrome 49+, хотя

24 голосов
/ 26 февраля 2013

Небольшая поправка к принятому решению пользователя 187291: 

serialize = function(obj) {
   var str = [];
   for(var p in obj){
       if (obj.hasOwnProperty(p)) {
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
       }
   }
   return str.join("&");
}

Проверка hasOwnProperty для объекта делает JSLint / JSHint счастливым и предотвращает случайную сериализацию методов объекта или других вещей, если объект - это не простой словарь. См. Абзац с заявлениями на этой странице: http://javascript.crockford.com/code.html

11 голосов
/ 11 ноября 2009

Вам нужно отправить произвольные объекты? Если это так, то GET - плохая идея, поскольку существуют ограничения на длину URL-адресов, которые будут принимать пользовательские агенты и веб-серверы. Я бы предложил создать массив пар имя-значение для отправки, а затем создать строку запроса: 

function QueryStringBuilder() {
    var nameValues = [];

    this.add = function(name, value) {
        nameValues.push( {name: name, value: value} );
    };

    this.toQueryString = function() {
        var segments = [], nameValue;
        for (var i = 0, len = nameValues.length; i < len; i++) {
            nameValue = nameValues[i];
            segments[i] = encodeURIComponent(nameValue.name) + "=" + encodeURIComponent(nameValue.value);
        }
        return segments.join("&");
    };
}

var qsb = new QueryStringBuilder();
qsb.add("veg", "cabbage");
qsb.add("vegCount", "5");

alert( qsb.toQueryString() );
10 голосов
/ 05 марта 2017

Rails / PHP Style Query Builder

Этот метод преобразует объект Javascript в URI Query String. Также обрабатывает вложенные массивы и объекты (в синтаксисе Rails / PHP): 

function serializeQuery(params, prefix) {
  const query = Object.keys(params).map((key) => {
    const value  = params[key];

    if (params.constructor === Array)
      key = `${prefix}[]`;
    else if (params.constructor === Object)
      key = (prefix ? `${prefix}[${key}]` : key);

    if (typeof value === 'object')
      return serializeQuery(value, key);
    else
      return `${key}=${encodeURIComponent(value)}`;
  });

  return [].concat.apply([], query).join('&');
}

Пример использования: 

let params = {
  a: 100,
  b: 'has spaces',
  c: [1, 2, 3],
  d: { x: 9, y: 8}
}

serializeQuery(params)
// returns 'a=100&b=has%20spaces&c[]=1&c[]=2&c[]=3&d[x]=9&d[y]=8
Страница:
...