javascript的Jquery param替代品

Question

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

{'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 中完成相同的操作。

Answer 1

这是一个迷你 jquery 参数 API [fiddle]。

您可以通过jqMini.param(obj);使用它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));

Answer 2

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

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

  return array.join("&");
}

Answer 3

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

Answer 4

这就是我想出的 - 它具有与 jQuery param 相同的数组处理。

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

Answer 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