URL编码你可能会懵

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/82598488

我们要查询一个年龄为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则是彻底解决了特殊字符带来的影响，能够正确识别参数值中的特殊字符