Question

我需要将json对象转换为url形式，如：“parameter = 12＆amp; 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对象中是否有任何函数可以执行此操作？

Answer 1

jQuery.param正是如此。如果您不使用jquery，请查看source。

如果你真的热衷于重新发明车轮，那就是这样：

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

Answer 2

使用ES6语法：

＆＃13;

var data = {
  'action':'actualiza_resultado',
  'postID': 1,
  'gl': 2,
  'gl2' : 3
};

let urlParameters = Object.entries(data).map(e => e.join('=')).join('&');

console.log(urlParameters);

＆＃13;

Answer 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"

Answer 4

但我想知道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方法（字段名称中包含方括号）或类似方法并不困难。

Answer 5

我在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('&');

Answer 6

就像@georg所说，你可以使用JQuery.param作为扁平物体。

如果你需要处理复杂的对象，可以使用JsonUri，这是一个python包。它也有JavaScript库

免责声明：我是JSONURI的作者

Answer 7

通过将name更改为多个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('&');
};

Answer 8

适用于Vanilla JavaScript的最佳解决方案：

var params = Object.keys(data)
  .filter(function (key) {
    return data[key] ? true : false
  })
  .map(function (key) {
    return encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
  })
  .join('&');

PS：此处使用过滤器删除空值或未定义的参数。它使网址看起来更干净。

Answer 9

根据georg的答案，还在字符串前添加?并使用ES6：

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

Answer 10

上面的自定义代码仅处理平面数据。而且JQuery在react native中不可用。因此，这里有一个js解决方案，可以在react native中处理多级对象和数组。

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

}

Answer 11

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

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

Answer 12

制作一个实用程序如果你有 nodejs

const querystring = require('querystring')

export function makeQueryString(params): string {
  return querystring.stringify(params)
}

导入示例

import { makeQueryString } from '~/utils'

使用示例

  makeQueryString({
    ...query,
    page
  })

Answer 13

由于大多数答案仅将平面对象转换为查询参数，因此我想分享我的答案。

这个函数可以处理平面对象，以及嵌套数组/对象，而只使用纯 JS。

        function incapsulateInBrackets(key)
        {
            return '[' + key + ']';
        }

        function encode(object, isSubEncode=false, prefix = '')
        {
            let parts = Object.keys(object).map( (key) => {

                let encodedParts = [];

                if(Array.isArray(object[key]))
                {
                    object[key].map(function(innerKey, index){

                        encodedParts.push( encode(object[key][index], true, prefix + key + incapsulateInBrackets(index)));

                    });
                }
                else if(object[key] instanceof Object)
                {
                    Object.keys(object[key]).map( (innerKey) => {

                        if(Array.isArray(object[key][innerKey]))
                        {
                            encodedParts.push( encode(object[key][index], true, prefix + incapsulateInBrackets(key) + incapsulateInBrackets(innerKey)) );
                        }
                        else
                        {
                            encodedParts.push( prefix + incapsulateInBrackets(key) + incapsulateInBrackets(innerKey) + '=' +  object[key][innerKey] );
                        }

                    });
                }
                else
                {
                    if(isSubEncode)
                    {
                        encodedParts.push( prefix + incapsulateInBrackets(key) + '=' + object[key] );
                    }
                    else
                    {
                        encodedParts.push( key + '=' + object[key] );
                    }
                }

                return encodedParts.join('&');

            });

            return parts.join('&');
        }

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

13 个答案: