javascript的jquery参数替代答案

【问题标题】：Jquery param alternative for javascriptjavascript的jquery参数替代
【发布时间】：2014-03-22 19:56:34
【问题描述】：

我需要转换以下类型字典：

{'key1': ['value1'], 'key2': ['value1', 'value2']}

致key1=value1&key2=....

即发布数据表格。我在 chrome 扩展中这样做，上面的 formdata 字典由以下方式返回：

chrome.webRequest.onBeforeRequest.addListener(function(details) {
      if(details.method=="POST")         // ajax call
      {
        message.postdata = details.requestBody.formData;
      }
      return {requestHeaders: details.requestHeaders};
 }, {urls: ["<all_urls>"],types: ["main_frame", "sub_frame"]}, ["blocking", "requestBody"]);

我记得使用 JQuery $.params() 函数实现了相同的功能。在javascript中如何做到这一点。

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

这是mini jquery param API [小提琴]。

您可以通过jqMini.param(obj);使用它

如上面的小提琴所示，它提供了相同的使用 jquery 的原始 $.param 函数输出。

注意：jqMini.param 不处理传统的 jquery 对象作为参数。

(function(w) {
    var app = {},
        class2type = {},
        toString = class2type.toString,
        r20 = /%20/g,
        rbracket = /\[\]$/;
    
    w.jqMini = app;
    
    app.type = function(obj) {
        if ( obj == null ) {
            return obj + "";
        }
        // Support: Android < 4.0, iOS < 6 (functionish RegExp)
        return typeof obj === "object" || typeof obj === "function" ?
            class2type[ toString.call(obj) ] || "object" :
        typeof obj;
    };
    
    app.isFunction = function(obj) {
        return app.type(obj) === "function";
    };
    
    app.buildParams = function(prefix, obj, add) {
        var name, key, value;
        
        if(Array.isArray(obj)) {
            for(var key in obj) {
                value = obj[key]
                if(rbracket.test(prefix))
                    add(prefix, value);
                else
                    app.buildParams(prefix + "[" + (typeof value === "object"? key: "") + "]", value, add );
            }
        } else if(app.type(obj) === 'object') {
            for(name in obj)
                app.buildParams(prefix + "[" + name + "]", obj[name], add);
        } else
            add(prefix, obj);
    };
    
    app.param = function(obj) {
        var prefix, key, value
        serialized = [],
            add = function(key, value) {
                value = app.isFunction(value)? value() : (value == null ? "" : value );
                serialized[serialized.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            };
        
        if(Array.isArray(obj)) {
            for(key in obj) {
                value = obj[key];
                add(key, value);
            }
        } else {
            for(prefix in obj)
                app.buildParams(prefix, obj[prefix], add);
        }
        
        return serialized.join('&').replace(r20, '+');
    };
    
})(window);

var obj = {'key1': ['value1'], 'key2': ['value1', 'value2']};
console.log(jqMini.param(obj));

【讨论】：

老兄，您应该使用此代码创建一个 Gist。老实说，在这个答案中它并没有被使用。对于从 Angular JS 的表单获取的数据，我需要一个替代 $.param() 的方法，并且为此使用 jquery 让我很丧。非常感谢！！ +1
i 在app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]", value, add );中未定义
谁能解释一下这行中的 v 和 i 是什么` app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]",值，添加 );`
我真的很好奇你从哪里得到 v 和 i ` app.buildParams(prefix + "[" + (typeof v === "object"? i: "") + "]" , 值, 添加);`
v 和 i 是 value 和 key 变量。我在 5 年前创建了这个小提琴，我想我在测试它时搞砸了。

【解决方案2】：

function queryParams(source) {
  var array = [];

  for(var key in source) {
     array.push(encodeURIComponent(key) + "=" + encodeURIComponent(source[key]));
  }

  return array.join("&");
}

【讨论】：

这不适用于嵌套对象。 @ryeballar 下面的答案想通了

【解决方案3】：

对于那些使用 AngularJS 的人，你可能想查看$httpParamSerializerJQLike

【讨论】：

【解决方案4】：

这就是我想出的——它与 jQuery 参数具有相同的数组处理方式。

var queryParam = function( ary ) {
    return Object.keys( ary ).map( function( key ) {
        if ( Array.isArray( ary[key] ) ) {
            var arrayParts = [];
            for ( var i = 0; i< ary[key].length; i++ ) {
                arrayParts.push( encodeURIComponent( key + '[]' ) + '=' + encodeURIComponent( ary[key][i] ) );
            }
            return arrayParts.join( '&' );
        }
        return encodeURIComponent( key ) + '=' + encodeURIComponent( ary[key] );
    }).join('&');
};

【讨论】：

【解决方案5】：

试试这个：

const data = {'key1': ['value1'], 'key2': ['value1', 'value2']};

const p = new URLSearchParams();
Object.keys(data).map((k) => data[k].map((v) => p.append(k+"[]",v)));

console.log(p.toString());

输出：key1%5B%5D=value1&key2%5B%5D=value1&key2%5B%5D=value2

【讨论】：