Javascript对象的查询字符串编码

JavaScript

逆天西门

2020-03-13

您是否知道将Javascript对象编码为string可通过GET请求传递的快速简单的方法

jQuery,没有其他框架-只是纯Javascript :)

第1380篇《Javascript对象的查询字符串编码》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
GreenA 2020.03.13

从答案@ user187291引用,添加“ isArray”作为参数以使json嵌套数组得以转换。

data : {
                    staffId : "00000001",
                    Detail : [ {
                        "identityId" : "123456"
                    }, {
                        "identityId" : "654321"
                    } ],

                }

要得出结果:

staffId = 00000001&Detail [0] .identityId = 123456&Detail [1] .identityId = 654321

serialize = function(obj, prefix, isArray) {
        var str = [],p = 0;
        for (p in obj) {
            if (obj.hasOwnProperty(p)) {
                var k, v;
                if (isArray)
                    k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                else
                    k = prefix ? prefix + "." + p + "" : p, v = obj[p];

                if (v !== null && typeof v === "object") {
                    if (Array.isArray(v)) {
                        serialize(v, k, true);
                    } else {
                        serialize(v, k, false);
                    }
                } else {
                    var query = k + "=" + v;
                    str.push(query);
                }
            }
        }
        return str.join("&");
    };

    serialize(data, "prefix", false);
阿飞 2020.03.13

好的,这是一个较旧的职位,但是我正面临这个问题,我已经找到了我的个人解决方案。

     function objToQueryString(obj){
        var k = Object.keys(obj);
        var s = "";
        for(var i=0;i<k.length;i++) {
            s += k[i] + "=" + encodeURIComponent(obj[k[i]]);
            if (i != k.length -1) s += "&";
        }
        return s;
     };
樱Davaid 2020.03.13

看起来更好一点

objectToQueryString(obj, prefix) {
    return Object.keys(obj).map(objKey => {
        if (obj.hasOwnProperty(objKey)) {
            const key = prefix ? `${prefix}[${objKey}]` : objKey;
            const value = obj[objKey];

            return typeof value === "object" ?
                this.objectToQueryString(value, key) :
                `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
        }

        return null;
    }).join("&");
}
GO村村 2020.03.13

这是已接受答案的咖啡版本。这样可以节省时间。

serialize = (obj, prefix) ->
  str = []
  for p, v of obj
    k = if prefix then prefix + "[" + p + "]" else p
    if typeof v == "object"
      str.push(serialize(v, k))
    else
      str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v))

  str.join("&")
Pro十三 2020.03.13

使用JSON。

请看一下这个问题,以获取有关如何实施的想法。

null 2020.03.13

好吧,每个人似乎都把他的单线放在这里,所以这是我的:

const encoded = Object.entries(obj).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&");
小卤蛋Tom 2020.03.13

用户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

null 2020.03.13

我建议使用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())
神无老丝Davaid 2020.03.13

您是否需要发送任意对象?如果是这样,则GET是一个坏主意,因为用户代理和Web服务器将接受的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() );
前端Pro 2020.03.13

只需使用URLSearchParams作品,涵盖所有当前的浏览器

new URLSearchParams(object).toString()
小红酱 2020.03.13

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

梅Near米亚 2020.03.13

像这样?

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android