无法将我的 Javascript 对象转换为参数字符串

Question

我有一个具有以下数据结构的对象。我正在尝试通过执行以下操作将此对象转换为参数字符串。

当我的代码 sn-p 在调试器中运行时，我在控制台中看不到错误，但由于某种原因它过早地提交了表单，并且在 URL 中我可以看到我的参数被发布并停止我的其余部分脚本。 Object,keys 看起来不正确，正在调试器中生成以下内容。

keys
(273) ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", * "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "90", "91", "92", "9 3", "94", "95", "96", "97", "98", "99", CJ
•   [0  99]
•   [100    199]
•   [200    272]
length: 273
•       proto   : Array(0)

获取下面的对象并将其转换为参数字符串以通过 ajax 发送的最佳方法是什么？

我希望返回一个参数字符串，如下所示 ip=111.111.111.111&hostname=rr.com&city=mycity 等等。

下面是我的 ipinfo 对象

{"ip":"111.111.111.111","hostname":"rr.com","city":"MyCity","region":"Ohio","country":"US","loc":"41.34.23","org":"Inc","postal":"1234","timezone":"America/New_York","readme":"https://www.google.com"}"

    var myKeys = Object.keys(ipinfo);
        var queryString = "";
        for (var i = 0; i < myKeys.length; i++) {
            var theKey = ipinfo[i];
            if (queryString !== "") queryString += "&";
            queryString += theKey + "=" + JSON.Stringify(ipinfo[theKey]);
        }

Answer 1

看起来你需要先JSON.parse()你的对象。你也可以试试：

Object.entries(JSON.parse(ipinfo)).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&')

Answer 2

首先，JSON.stringify("a string") 返回"\"a string\""，因此您不能在 URL 中附加它。我建议让原生值到字符串转换来完成这项工作。但是，您应该正确地对每个值进行 URL 编码：

queryString += encodeURIComponent(theKey) + "=" + encodeURIComponent(ipinfo[theKey]+"");

其次，你可能有一个字符串形式的对象，例如。 "{\"bla\":1234}" 等 Object.keys 返回 0 为 "{"，1 为 "\"" 等等 - 对于每个字符串索引，一个数字。要将其作为对象获取，您必须对其进行解析：

 const myObj = JSON.parse(myObj);

这两个的实际实现可以在@MarcosLuis nice answer中看到。

Answer 3

我已经创建了一个方法来执行此操作，它接受一个字符串参数，该参数说明 queryString 在更改之前的状态，因此它可以将 params 对象与现有对象合并。

在你的情况下，你会这样做：

ipinfo = {"ip":"111.111.111.111","hostname":"rr.com","city":"MyCity"};
attachURLParams ("http://some.site.com", ipinfo);

会得到：

“http://some.site.com?ip=111.111.111.111&hostname=rr.com&city=MyCity”

里面有一些doc cmets的方法：

attachURLParams = function (str, paramsObj, overWriteBool=true) {
    /* function adds parameters from json paramsObj to url string
    will work even if param already exists in the string.
    Overwrites existing params by default
    USE: var params = {var1:"value1", var2:"value2"}
    someURL = "http://www.test.com";
    someURL = attachURLParams(someURL, params);
    returns: http://www.test.com?var1=value1&var2=value2*/
    let ind = str.indexOf('?');
    const buildString = (mainPart, paramsObject) => {
        var attached = "?";
        for (var key in paramsObject) {
            attached += key + "=" + paramsObject[key] + "&";
        }
        // remove last "&" and return
        return String(mainPart + attached).slice(0, -1);
    }
    if (ind > -1) {
        var param_array = str.substring(ind + 1).split('&');
        var oldParamsObj = {},
        theLength = param_array.length;
        // keep all existing params in params object
        for (var i = 0; i < theLength; i++) {
            var x = param_array[i].toString().split('=');
            oldParamsObj[x[0]] = x[1];
        }
        // add new params to oldObj
        for (var key in paramsObj) {
            // skip if already there or not
            if (oldParamsObj[key] && !overWriteBool)
                continue;
            oldParamsObj[key] = paramsObj[key];
        }
        // build the string from scratch
        return buildString(str.slice(0, ind), oldParamsObj);
    } else {
        // no params in string, just add all mine
        return buildString(str, paramsObj);
    }
}

重要： 该方法没有责任对参数进行转义或编码。您应该在对象值中或在获取参数字符串之后注意这一点。

Answer 4

如果使用 jquery，请在 ajax 请求中使用 data 属性。

    $.ajax({
      url: "http://www.mywebsite.com/endpoint",
      method: "GET",
      data: { "MyFirstParameter" : someVariable, "MySecondParameter" : someOtherVariable},
      success: function(data){
        console.log("Success");
        console.log(data);
      },
      error: function(error){
        console.log("ERROR");
        console.log(error);
      }
    });