最近遇到一个问题,如何在url中传一个对象?

需求:

跨域传值,将对象通过url传送过去

分析:

  1. 传值前需要先将对象转换为一个json字符串
  2. 然后将转换后的字符串转码

传值

1
2
3
4
var obj = {a: 1, b:2}
var paramObj = JSON.stringify(obj)
var encodeObj = encodeURIComponent(paramObj)
var url = url + '?objStr=' + encodeObj

获取值

1
2
3
4
var objStr = getQueryString(objStr)
var encodeObj = decodeURIComponent(objStr)
var paramObj = JSON.parse(encodeObj)
console.log(paramObj) // {a: 1, b:2}

encodeURI 和 encodeURIComponent 的区别:

encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字 - _ . ! ~ * ‘ ( )
数字符号 #

请注意,encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、-和_之外的所有字符。

参考:
MDN encodeURI
MDN encodeURIComponent