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

Question

我正在为Facebook Feed Dialog 格式化一个URL。不过参数太多了。我想为这些对话框提供一个功能，例如：

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() 是正确使用的函数吗？

我被困在Lovers source code。

更新：由于我们使用的是 jQuery，因此我使用 jQuery.each 重写了该方法。我还按照@galambalazs 和@T.J. 的建议将escape() 替换为encodeURIComponent()。克劳德。谢谢各位！

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

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 2

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"

Answer 3

有一个 jQuery 方法可以做到这一点：$.param。它会像这样工作：

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

Answer 4

更好的是，请改用encodeURIComponent。看到这个article比较两者：

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

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