2017-04-26 176 views
0

我需要帮助解决jQuery的$ .param()缺乏足够深的问题,并且它会留下一些深度的JSON,例如%5D等等。将Javascript对象或jQuery对象转换为查询字符串

不,这是一个PayEezy电子商务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查询字符串,该字符串不包括方括号,并且包含点符号,并且可能在比正则表达式更少的代码行中取代我以前定居的技术?例如,在jQuery或Javascript中是否已经有了一些函数,当它们结合起来处理这个我不知道的很好的东西时呢?

+2

使自己的串行器。 https://github.com/jquery/jquery/blob/master/src/serialize.js –

回答

0

我做了我自己的递归序列化器。希望它按要求工作。

该函数将遍历对象的所有属性。如果该值是一个对象,它将自行调用并通过"breadcrum"。 A breadcrum只是函数已经到达的位置的“路径”。例如,如果我们查看帐单邮寄地址中的电话类型,传递给该功能的breadcrum将为billing_address.phone.

如果该值不是一个对象,那么它只是将自身追加到breadcrum,并将其自身附加到查询字符串中。

如果值为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));