Свести объект javascript для передачи в виде строки запроса - PullRequest
54 голосов
/ 31 марта 2011

У меня есть объект javascript, который мне нужно объединить в строку, чтобы я мог передать как строку запроса, как бы я это сделал?то есть:

{ cost: 12345, insertBy: 'testUser' } станет cost=12345&insertBy=testUser

Я не могу использовать вызов JQuery AJAX для этого вызова, я знаю, что мы можем использовать это и передать объект как data, ноне в этом дело.Хотя использовать jQuery для выравнивания объекта было бы хорошо.

Спасибо.

Ответы [ 11 ]

79 голосов
/ 31 марта 2011

Вот не-JQuery версия:

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}
66 голосов
/ 31 марта 2011

Вы хотите jQuery.param:

var str = $.param({ cost: 12345, insertBy: 'testUser' });
// "cost=12345&insertBy=testUser"

Обратите внимание, что эта функция используется внутри jQuery для сериализации объектов, переданных в качестве аргумента data.

34 голосов
/ 03 октября 2016

Моя версия ES6 (чистый Javascript, без jQuery):

function toQueryString(paramsObject) {
  return Object
    .keys(paramsObject)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`)
    .join('&')
  ;
}
16 голосов
/ 01 октября 2014

Вот еще одна не-jQuery-версия, которая использует lodash или подчеркивание, если вы уже используете одну из этих библиотек:

var toQueryString = function(obj) {
  return _.map(obj,function(v,k){
    return encodeURIComponent(k) + '=' + encodeURIComponent(v);
  }).join('&');
};
15 голосов
/ 14 июля 2015

Это старый вопрос, но в верхней части поисков Google, поэтому я добавляю его для полноты.

Если 1) вы не хотите использовать jQuery, но 2) вы хотитепреобразовать вложенный объект в строку запроса, затем (на основе ответов Тима Дауна и Гая) использовать:* Какие выходы:

prop1=x&prop2[y]=1&prop2[z]=2
15 голосов
/ 31 марта 2011

Попробуйте метод $.param():

var result = $.param({ cost: 12345, insertBy: 'testUser' });
4 голосов
/ 21 октября 2016

Другая версия:

function toQueryString(obj) {
    return Object.keys(obj).map(k => {
      return encodeURIComponent(k) + "=" + encodeURIComponent(obj[k])
    })
    .join("&");
}
3 голосов
/ 31 марта 2011

Общий JavaScript:

function toParam(obj) {
  var str = "";
  var seperator = "";
  for (key in obj) {
    str += seperator;
    str += enncodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
    seperator = "&";
  }
  return str;
}


toParam({ cost: 12345, insertBy: 'testUser' })
"cost=12345&insertBy=testUser"
3 голосов
/ 31 марта 2011
var myObj = { cost: 12345, insertBy: 'testUser' },
    param = '',
    url   = 'http://mysite.com/mypage.php';    

for (var p in myObj) {
  if (myObj.hasOwnProperty(p)) {
    param += encodeURIComponent(p) + "=" + encodeURIComponent(myObj[p]) + "&";
  }
}

window.location.href = url + "?" + param;
1 голос
/ 25 июня 2017

ES6-версия Ответ Джропа (также анализирует вложенные параметры)

const toQueryString = (obj, urlEncode = false) => {
  if (!obj) return null;
  const flattenObj = (x, path = []) => {
    const result = [];
    Object.keys(x).forEach((key) => {
      if (!Object.prototype.hasOwnProperty.call(x, key)) return;
      const newPath = path.slice();
      newPath.push(key);
      let vals = [];
      if (typeof x[key] === 'object') {
        vals = flattenObj(x[key], newPath);
      } else {
        vals.push({ path: newPath, val: x[key] });
      }
      vals.forEach((v) => {
        return result.push(v);
      });
    });
    return result;
  };

  let parts = flattenObj(obj);
  parts = parts.map((varInfo) => {
    if (varInfo.path.length === 1) {
      varInfo.path = varInfo.path[0]; // eslint-disable-line no-param-reassign
    } else {
      const first = varInfo.path[0];
      const rest = varInfo.path.slice(1);
      varInfo.path = `${first}[${rest.join('][')}]`; // eslint-disable-line no-param-reassign
    }
    return varInfo;
  });

  const queryString = parts.map((varInfo) => {
    return `${varInfo.path}=${varInfo.val}`;
  }).join('&');
  if (urlEncode) {
    return encodeURIComponent(queryString);
  }
  return queryString;
};
...