JSON对象到查询字符串的深度Javascript或jQuery转换

Question

我需要帮助解决jQuery的$.param()不足的问题，因为它的工作不够深入，而且它还留下了一些更深的JSON，比如%5D等等。

这并不是PayEezy eCommerce API的问题，但是他们的沙箱API需要如下所示的查询字符串：

https://api-cert.payeezy.com/v1/securitytokens?apikey=FAKEZdp9nJrKu46wX9evGNnRbGL38W6I&js_security_key=js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1&callback=respondPEZ&auth=true&ta_token=NOIW&type=FDToken&currency=USD&credit_card.cardholder_name=John+Doe&credit_card.card_number=4111111111111111&credit_card.exp_date=1218&credit_card.cvv=100&credit_card.type=visa&billing_address.street=&billing_address.city=&billing_address.state_province=&billing_address.zip_postal_code=&billing_address.country=&billing_address.email=&billing_address.phone.type=&billing_address.phone.number=

在您看这个的时候，我希望您注意到一些东西，比如billing_address.state而不是billing_address[state]，而不是billing_address%5Bstate%5D。对PayEezy来说，我需要一种特殊的方式。

因此，我在Javascript中创建了像这样的JSON对象：

var o = {
    apikey: 'FAKEZdp9nJrKu46wX9evGNnRbGL38W6I',
    js_security_key: 'js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1',
    callback: 'respondPEZ',
    auth: true,
    ta_token: 'NOIW',
    type: 'FDToken',
    currency: 'USD',                
    credit_card: {
        type: 'visa',
        cardholder_name: 'John Doe',
        card_number: '4111111111111111',
        exp_date: '1218',
        cvv: '100'
    },
    billing_address: {
        street: undefined,
        city: undefined,
        state_province: undefined,
        zip_postal_code: undefined,
        country: undefined,
        email: undefined,
        phone: {
            type: undefined,
            number: undefined
        }
    }
};

现在，当您通过jQuery的$.param()运行它时，在查询字符串上得到的结果不够接近：

apikey=FAKEZdp9nJrKu46wX9evGNnRbGL38W6I&js_security_key=js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1&callback=respondPEZ&auth=true&ta_token=NOIW&type=FDToken&currency=USD&credit_card%5Btype%5D=visa&credit_card%5Bcardholder_name%5D=John+Doe&credit_card%5Bcard_number%5D=4111111111111111&credit_card%5Bexp_date%5D=12%2F18&credit_card%5Bcvv%5D=100&billing_address%5Bstreet%5D=&billing_address%5Bcity%5D=&billing_address%5Bstate_province%5D=&billing_address%5Bzip_postal_code%5D=&billing_address%5Bcountry%5D=&billing_address%5Bemail%5D=&billing_address%5Bphone%5D%5Btype%5D=&billing_address%5Bphone%5D%5Bnumber%5D=

看到那些%5D和%5B了吗？这些都是不可取的，而不是PayEezy在他们的API中想要的。

因此，通过这样做，我设法更接近于解决问题：

var s = decodeURIComponent($.param(o,false));

但后来我发现我可以通过这样做来修复它：

var s = decodeURIComponent($.param(o,false))
    .replace(/\]\=/g,'=')
    .replace(/\]\[/g,'.')
    .replace(/\[/g,'.');

我的问题是--是否有一种更完善的方法来将对象内嵌的JSON对象转换成一个更易于URL的查询字符串，它不包括方括号，并且包含点表示法，也许比我确定的regex替换技术少一行代码？例如，在jQuery或Javascript中是否已经有一些函数组合在一起，可以很好地处理这些我不知道的功能？

Answer 1

我已经创建了自己的递归序列化程序。希望它能按要求工作。

该函数将遍历对象的所有属性。如果该值是一个对象，它将调用自己并传入一个"breadcrum"。一个breadcrum只是一个属性的“路径”，函数为了到达它所处的位置而采取了这些属性。例如，如果我们查看计费地址中的电话类型，传递给该函数的breadcrum将是billing_address.phone.。

如果该值不是一个对象，那么它只会将自己附加到面包屑中，然后再将自己附加到查询字符串中。

如果值为undefined，则将其设置为空字符串。

​

var o = {
    apikey: 'FAKEZdp9nJrKu46wX9evGNnRbGL38W6I',
    js_security_key: 'js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1',
    callback: 'respondPEZ',
    auth: true,
    ta_token: 'NOIW',
    type: 'FDToken',
    currency: 'USD',                
    credit_card: {
        type: 'visa',
        cardholder_name: 'John Doe',
        card_number: '4111111111111111',
        exp_date: '1218',
        cvv: '100'
    },
    billing_address: {
        street: undefined,
        city: undefined,
        state_province: undefined,
        zip_postal_code: undefined,
        country: undefined,
        email: undefined,
        phone: {
            type: undefined,
            number: undefined
        }
    }
};

function convertToQueryString(object, currentBreadcrum = '') {
    var queryString = '';
    
    for (var property in object) {
        var potentialObject = object[property];
        
        if (typeof potentialObject === 'undefined') {
            potentialObject = '';
        } // set undefined values to an empty string
        
        if (typeof potentialObject === 'object') {
            queryString += convertToQueryString(potentialObject, currentBreadcrum + property + '.');
        } else {
            if (currentBreadcrum === '' && queryString === '') { // don't prepend an '&' if it's the first item in the query string
                queryString += currentBreadcrum + property + '=' + potentialObject;
            } else {
                queryString += '&' + currentBreadcrum + property + '=' + potentialObject;
            }
        }
    }
    
    return queryString;
}

console.log(convertToQueryString(o));

​