Есть ли какая-либо нативная функция для преобразования параметров json в url?

Ответ 1

jQuery предоставляет param, которая именно это и делает. Если вы не используете jquery, взгляните на источник.

В основном это выглядит так:

url = Object.keys(data).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')

Обновление 2019 года: теперь есть встроенный объект URLSearchParams для вещей такого типа:

let myParams = {'foo': 'hi there', 'bar': '???'};

let u = new URLSearchParams(myParams).toString();

console.log(u);

Ответ 2

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

var data = {
  'action':'actualiza_resultado',
  'postID': 1,
  'gl': 2,
  'gl2' : 3
};

let urlParameters = Object.entries(data).map(e => e.join('=')).join('&');

console.log(urlParameters);

Ответ 3

Вам не нужно сериализовать этот литерал объекта.

Лучший подход - это что-то вроде:

function getAsUriParameters(data) {
   var url = '';
   for (var prop in data) {
      url += encodeURIComponent(prop) + '=' + 
          encodeURIComponent(data[prop]) + '&';
   }
   return url.substring(0, url.length - 1)
}
getAsUriParameters(data); //"action=actualiza_resultado&postID=1&gl=2&gl2=3"

Ответ 4

Что-то, что я нахожу хорошо выглядящим в ES6:

function urlfy(obj) {
    return Object
        .keys(obj)
        .map(k => '${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}')
        .join('&');
}

Позднее обновление (то же самое, может быть, немного чище):

const urlfy = obj => Object
    .keys(obj)
    .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]))
    .join('&');

Ответ 5

Но мне интересно, есть ли какая-либо функция в javascript

Ничего не записано в ядре.

или json для этого?

JSON - это формат данных. Он вообще не имеет функций.

Это относительно тривиальная проблема для решения, хотя, по крайней мере, для плоских структур данных.

Не кодируйте объекты как JSON, а затем:

function obj_to_query(obj) {
    var parts = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
        }
    }
    return "?" + parts.join('&');
}

alert(obj_to_query({
    'action': 'actualiza_resultado',
    'postID': 1,
    'gl': 2,
    'gl2': 3
}));  

Существует не стандартный способ кодирования сложных структур данных (например, с вложенными объектами или массивами). Нетрудно было бы расширить это, чтобы эмулировать метод PHP (с квадратными скобками в именах полей) или аналогичным.

Ответ 6

Подобно @georg, вы можете использовать JQuery.param для плоских объектов.

Если вам нужно обработать сложные объекты, вы можете использовать JsonUri, пакет python, который делает именно это. Для него есть библиотека JavaScript

Отказ от ответственности: я являюсь автором JSONURI

Ответ 7

Этот процесс обрабатывает массивы, изменяя name на mutiple name[]

function getAsUriParameters (data) {
  return Object.keys(data).map(function (k) {
    if (_.isArray(data[k])) {
      var keyE = encodeURIComponent(k + '[]');
      return data[k].map(function (subData) {
        return keyE + '=' + encodeURIComponent(subData);
      }).join('&');
    } else {
      return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
    }
  }).join('&');
};

Ответ 8

Я сделал реализацию, которая поддерживает вложенные объекты и массивы, т.е.

var data = {
    users: [
    {
      "name": "jeff",
      "tasks": [
        "Do one thing",
        "Do second thing"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

Будет:

users[0][name]=jeff&users[0][tasks][0]=Do%20one%20thing&users[0][tasks][1]=Do%20second%20thing&users[1][name]=rick&users[1][tasks][0]=Never%20gonna%20give%20you%20up&users[1][tasks][1]=Never%20gonna%20let%20you%20down

Итак, вот реализация:

var isObj = function(a) {
  if ((!!a) && (a.constructor === Object)) {
    return true;
  }
  return false;
};
var _st = function(z, g) {
  return "" + (g != "" ? "[" : "") + z + (g != "" ? "]" : "");
};
var fromObject = function(params, skipobjects, prefix) {
  if (skipobjects === void 0) {
    skipobjects = false;
  }
  if (prefix === void 0) {
    prefix = "";
  }
  var result = "";
  if (typeof(params) != "object") {
    return prefix + "=" + encodeURIComponent(params) + "&";
  }
  for (var param in params) {
    var c = "" + prefix + _st(param, prefix);
    if (isObj(params[param]) && !skipobjects) {
      result += fromObject(params[param], false, "" + c);
    } else if (Array.isArray(params[param]) && !skipobjects) {
      params[param].forEach(function(item, ind) {
        result += fromObject(item, false, c + "[" + ind + "]");
      });
    } else {
      result += c + "=" + encodeURIComponent(params[param]) + "&";
    }
  }
  return result;
};

var data = {
  users: [{
      "name": "jeff",
      "tasks": [
        "Do one thing",
        "Do second thing"
      ]
    },
    {
      "name": "rick",
      "tasks": [
        "Never gonna give you up",
        "Never gonna let you down"
      ]
    }
  ]
}

document.write(fromObject(data));

Ответ 9

На основании ответа Георга, но также и добавления ? перед строкой и используя ES6:

  const query = !params ? '': Object.keys(params).map((k, idx) => {
    let prefix = '';
    if (idx === 0) {
      prefix = '?';
    }
    return prefix + encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);
  }).join('&');

Ответ 10

Пользовательский код выше обрабатывает только плоские данные. И JQuery не доступен в реагировать родной. Итак, вот решение js, которое работает с многоуровневыми объектами и массивами в реагировать нативно.

function formurlencoded(data) {
const opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

let sorted = Boolean(opts.sorted),
    skipIndex = Boolean(opts.skipIndex),
    ignorenull = Boolean(opts.ignorenull),
    encode = function encode(value) {
        return String(value).replace(/(?:[\0-\x1F"-&\+-\}\x7F-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g, encodeURIComponent).replace(/ /g, '+').replace(/[!'()~\*]/g, function (ch) {
            return '%' + ch.charCodeAt().toString(16).slice(-2).toUpperCase();
        });
    },
    keys = function keys(obj) {
        const keyarr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.keys(obj);
        return sorted ? keyarr.sort() : keyarr;
    },
    filterjoin = function filterjoin(arr) {
        return arr.filter(function (e) {
            return e;
        }).join('&');
    },
    objnest = function objnest(name, obj) {
        return filterjoin(keys(obj).map(function (key) {
            return nest(name + '[' + key + ']', obj[key]);
        }));
    },
    arrnest = function arrnest(name, arr) {
        return arr.length ? filterjoin(arr.map(function (elem, index) {
            return skipIndex ? nest(name + '[]', elem) : nest(name + '[' + index + ']', elem);
        })) : encode(name + '[]');
    },
    nest = function nest(name, value) {
        const type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : typeof value === 'undefined' ? 'undefined' : typeof(value);
        let f = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;

        if (value === f) f = ignorenull ? f : encode(name) + '=' + f; else if (/string|number|boolean/.test(type)) f = encode(name) + '=' + encode(value); else if (Array.isArray(value)) f = arrnest(name, value); else if (type === 'object') f = objnest(name, value);

        return f;
    };

return data && filterjoin(keys(data).map(function (key) {
    return nest(key, data[key]);
}));

}