是否有任何本机函数将 json 转换为 url 参数？

IT技术 javascript json
2021-02-28 15:30:55

我需要将 json 对象转换为 url 形式，如：“parameter=12&asd=1”

我完成了这个：

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

        var string_=JSON.stringify(data);

        string_=string_.replace(/{/g, "");
        string_=string_.replace(/}/g, "");
        string_=string_.replace(/:/g, "=")
        string_=string_.replace(/,/g, "&");
        string_=string_.replace(/"/g, "");

但我想知道 javascript 或 JSON 对象中是否有任何函数可以做到这一点？

6个回答

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);

更新：您可以使用原生 URLSearchParams：developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
2021-04-24 15:30:55
在 web Worker()上下文中很有用- 没有 jQuery
2021-04-25 15:30:55
使用 URLSearchParams 处理嵌套对象时遇到问题
2021-05-08 15:30:55
可能有些人“热衷于重新发明轮子”，因为他们没有使用 jQuery——无论是出于好还是坏的原因。
2021-05-09 15:30:55
不使用 jquery 不是重新发明轮子，听说过 underscorejs？
2021-05-16 15:30:55

使用 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);

问题是关于 JSON 对象的。但是，如果 JSON 包含数组，那么该解决方案也会产生良好的结果，但需要在服务器端进行解析。例如：var data = { 'action':'actualiza_resultado', 'postID': 1, 'gl': 2, 'gl2' : 3, 'names': ['one','two', 'three'] } ; 结果：“action=actualiza_resultado&postID=1&gl=2&gl2=3&names=one,two,three”
2021-05-07 15:30:55

我做了一个支持嵌套对象和数组的实现，即 

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));

被低估的答案！+1
2021-05-10 15:30:55

您不需要序列化此对象文字。

更好的方法是这样的：

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"
你需要调用encodeURIComponent上prop，并data[prop]妥善进行编码。正如所写，当键或值包含'&'或'#'或prop包含时，这会产生一个损坏的 URL '='。
2021-04-23 15:30:55
toString将调用默认值，结果可能类似于elem1%20elem2%20elem3
2021-04-30 15:30:55

我在 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('&');
比@Tareq 好
2021-05-10 15:30:55
其它你可能感兴趣的问题
上一篇为什么在 Javascript 中添加两位小数会产生错误的结果？ 下一篇在纯Javascript中按类隐藏元素