展平javascript对象以作为查询字符串传递

Question

我有一个javascript对象,我需要展平成一个字符串,以便我可以作为查询字符串传递,我该怎么做？即:

{ cost: 12345, insertBy: 'testUser' } 会成为 cost=12345&insertBy=testUser

我不能使用jQuery AJAX调用这个调用,我知道我们可以使用它并传递对象,data但不是在这种情况下.然而,使用jQuery来展平对象是可以的.

谢谢.

Answer 1

这是一个非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("&");
}

Answer 2

你想要jQuery.param:

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

请注意,这是jQuery内部使用的函数,用于序列化作为data参数传递的对象.

Answer 3

我的ES6版本(纯Javascript,没有jQuery):

function toQueryString(paramsObject) {
  return Object
    .keys(paramsObject)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`)
    .join('&')
  ;
}

Answer 4

这是另一个使用lodash或下划线的非jQuery版本,如果你已经使用了其中一个库:

var toQueryString = function(obj) {
  return _.map(obj,function(v,k){
    return encodeURIComponent(k) + '=' + encodeURIComponent(v);
  }).join('&');
};

Answer 5

尝试$.param()方法:

var result = $.param({ cost: 12345, insertBy: 'testUser' });

Answer 6

这是一个老问题,但在谷歌搜索的顶部,所以我添加这个是为了完整性.

如果1)你不想使用jQuery,但是2)你想将嵌套对象转换为查询字符串,那么(建立Tim Down和Guy的答案),使用:

function toQueryString(obj, urlEncode) {
    //
    // Helper function that flattens an object, retaining key structer as a path array:
    //
    // Input: { prop1: 'x', prop2: { y: 1, z: 2 } }
    // Example output: [
    //     { path: [ 'prop1' ],      val: 'x' },
    //     { path: [ 'prop2', 'y' ], val: '1' },
    //     { path: [ 'prop2', 'z' ], val: '2' }
    // ]
    //
    function flattenObj(x, path) {
        var result = [];

        path = path || [];
        Object.keys(x).forEach(function (key) {
            if (!x.hasOwnProperty(key)) return;

            var newPath = path.slice();
            newPath.push(key);

            var vals = [];
            if (typeof x[key] == 'object') {
                vals = flattenObj(x[key], newPath);
            } else {
                vals.push({ path: newPath, val: x[key] });
            }
            vals.forEach(function (obj) {
                return result.push(obj);
            });
        });

        return result;
    } // flattenObj

    // start with  flattening `obj`
    var parts = flattenObj(obj); // [ { path: [ ...parts ], val: ... }, ... ]

    // convert to array notation:
    parts = parts.map(function (varInfo) {
        if (varInfo.path.length == 1) varInfo.path = varInfo.path[0];else {
            var first = varInfo.path[0];
            var rest = varInfo.path.slice(1);
            varInfo.path = first + '[' + rest.join('][') + ']';
        }
        return varInfo;
    }); // parts.map

    // join the parts to a query-string url-component
    var queryString = parts.map(function (varInfo) {
        return varInfo.path + '=' + varInfo.val;
    }).join('&');
    if (urlEncode) return encodeURIComponent(queryString);else return queryString;
}

使用如下:

console.log(toQueryString({
    prop1: 'x',
    prop2: {
        y: 1,
        z: 2
    }
}, false));

哪个输出:

prop1=x&prop2[y]=1&prop2[z]=2