我们要查询一个年龄为20,姓名包含 tom 的人,那么我们会这样去组织请求
var url="http://xxx/?age=20&name=tom"
然后服务端就能收到下面的接口请求参数
{
"age":"20",
"name":"tom"
}
如果我要搜索的姓名是 tom&lucy ,那么url就变成了
var url="http://xxx?age=20&name=tom&lucy"
我们预想的结果是
{
"age":"20",
"name":"tom&lucy"
}
然而实际上确是
{
"age":"20",
"name":"tom",
"lucy":""
}
想必大家也能理解,这个参数中包含 & ,就被当做URL本身的参数结构了,关键是如何解决这个问题呢?
encodeURI
可能有的同学知道JavaScript中有个 encodeURI() 方法用来对URI进行编码,接下来我们试试
encodeURI(url)
得到的结果呢?抱歉,和原url一模一样,没有任何变化,为什么会这样呢?,这是因为encodeURI强调的是给整个URL进行编码,用特殊的UTF-8编码替换所有的无效字符,从而让浏览器能够接受和理解,里面的空格和中文都被编码了,而 &= 未被编码
encodeURIComponent
相比于encodeURI encodeURIComponent则强调对URL中的某个部分彻底编码,比encodeURI编码的范围更大,能够编码更多的字符,@#$&=:/,;?+
可见?&=这些本属于URL结构的特殊字符会被encodeURIComponent编码,而不会被encodeURI编码,所以使用encodeURIComponent对url进行部分编码,编码的结果为纯粹的字符串,肯定是不能对整个url运用这个方法,
正确的姿势是单独对name的值进行单独编码
结论
encodeURI本质上对接口的识别没有任何影响,仅仅是为了让URL更好看
encodeURIComponent则是彻底解决了特殊字符带来的影响,能够正确识别参数值中的特殊字符