JavaScript 函数将 JSON 键值对象转换为查询字符串

Question

我正在努力格式化 Facebook Feed Dialog 的网址。不过参数实在是太多了。我想要为这些对话框提供一个功能，例如：

function generateDialogUrl(dialog, params) {
  base  = "http://www.facebook.com/dialog/" + dialog + "?";
  tail = [];
  for (var p in params) {
    if (params.hasOwnProperty(p)) {
      tail.push(p + "=" + escape(params[p]));
    }
  }
  return base + tail.join("&")
}

哦哇...我想我刚刚回答了我自己的问题。是这样吗？ escape() 是正确使用的函数吗？

我被困在情人源代码。

更新：因为我们使用的是 jQuery，所以我使用 jQuery.each 重写了该方法。我还按照 @galambalazs & 的建议，用 encodeURIComponent() 替换了 escape() 。 @TJ克劳德。谢谢你们！

var generateDialogUrl = function (dialog, params) {
  base  = "http://www.facebook.com/dialog/" + dialog + "?";
  tail = [];
  $.each(params, function(key, value) {
    tail.push(key + "=" + encodeURIComponent(value));
  })
  return base + tail.join("&");
}

它正在工作！

Answer 1

更好的是，使用 encodeURIComponent 代替。请参阅这篇文章比较两者：

escape()方法不编码
被解释的 + 字符
也作为服务器端的空间
由带有空格的表单生成
他们的领域。由于这个缺点
事实上这个函数失败了
处理非 ASCII 字符
正确地，您应该避免使用
尽可能使用 escape() 。 最好的
替代方案通常是
encodeURIComponent()。

escape() 不会编码：@*/+

Answer 2

有一个 jQuery 方法可以完成此操作：$.param。它会像这样工作：

var generateDialogUrl = function (dialog, params) {
  base = 'http://www.facebook.com/dialog/' + dialog + '?';
  return base + $.param(params);
}

Answer 3

const createQueryParams = (param, prefix = '') => {
    let queryString = '';
    if (param.constructor === Object) {
        queryString = Object.keys(param).reduce((result, key) => {
            const obj = param[key];
            const queryParam = result ? `${result}&${prefix}` : prefix;
            if (obj.constructor === Object) {
                return `${queryParam}${createQueryParams(obj, `${key}.`)}`;
            } else if(obj.constructor === Array) {
                const qp= obj.map((item, index)=> {
                    if (item.constructor === Object || item.constructor === Array) {
                        const query = createQueryParams(item, `${key}[${index}].`);
                        return `${query}`;
                    } else {
                        return `${key}[${index}]=${item}`;
                    }
                }).reduce((res, cur) => {
                    return res ? `${res}&${cur}`: `${cur}`;
                }, '');

                return `${queryParam}${qp}`;
            } else {
                return `${queryParam}${key}=${obj}`;
            }
        }, '');
    } else if(param.constructor === Array) {
        queryString = param.reduce((res, cur) => `${res},${cur}`);
    } else {
        queryString = param;
    }

    return encodeURI(queryString);
};

例子：

createQueryParams({"Context":{"countryCode":"NO"},"Pagination":{"limit":10,"offset":1},"AdditionalField":[{"name":"Policy Number","value":"Pol123"},{"name":"Policy Version","value":"PV1"}]});

Answer 4

convertJsonToQueryString: function (json, prefix) {
    //convertJsonToQueryString({ Name: 1, Children: [{ Age: 1 }, { Age: 2, Hoobbie: "eat" }], Info: { Age: 1, Height: 80 } })
    if (!json) return null;
    var str = "";
    for (var key in json) {
        var val = json[key];
        if (isJson(val)) {
            str += convertJsonToQueryString(val, ((prefix || key) + "."));
        } else if (typeof (val) == "object" && ("length" in val)) {
            for (var i = 0; i < val.length; i++) {
                //debugger
                str += convertJsonToQueryString(val[i], ((prefix || key) + "[" + i + "]."));
            }
        }
        else {
            str += "&" + ((prefix || "") + key) + "=" + val;
        }
    }
    return str ? str.substring(1) : str;
}

isJson = function (obj) {
    return typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
};

示例：

convertJsonToQueryString({Name:1,Children:[{Age:1},{Age:2,Hoobbie:"eat"}],Info:{Age:1,Height:80}})

结果：

"Name=1Children[0].Age=1Children[1].Age=2&Children[1].Hoobbie=eatInfo.Age=1&Info.Height=80"