前后端中Url编码方法的一点小区别(encodeURI与HttpUtility.UrlEncodeUnicode、encodeURIComponent与HttpUtility.UrlEncode)

区别

前端与后端的Url编码方法,尽管很多时候通用,但编码后的值并不完全相同,因为前端编码方法会排除对某些字符进行编码(各方法不编码的字符不尽相同), 而相应的后端.Net的Url编码方法并不针对相应这些字符都排除编码,并且得到的编码后的十六进制字符为小写字符(前端为相应的十六进制大写字母)

 前端各Url编码方法排除字符的官方说明:

前后端中Url编码方法的一点小区别(encodeURI与HttpUtility.UrlEncodeUnicode、encodeURIComponent与HttpUtility.UrlEncode)_第1张图片

前后端中Url编码方法的一点小区别(encodeURI与HttpUtility.UrlEncodeUnicode、encodeURIComponent与HttpUtility.UrlEncode)_第2张图片

关于解码

不过解码的情况则不会有所不同,不管是前端还是后端编码出来的结果,都可以用后端解码方法或前端解码方法解码出原来的字符串信息,因为无论编码后的字母大写或小写都是相同的十六进制,编码由于不同排除字符的造成的不同  在解码中只是遇到有编码的字符则相就解码还原,没有则不用解码直接还原,所以解码只要方法对应,前后端解码得到的结果却是相同的不会有偏差(前端escape、encodeURI、encodeURIComponent编码,在前端需分别以unescape、decodeURI、decodeURIComponent解码,但在后端却可以都用统一的方法HttpUtility.UrlDecode解码还原)。  

1. 过时的 escape 编码:

编码方法 escape (已过时)  : 对应后端方法 HttpUtility.UrlEncodeUnicode

相应解码方法 unescape : 对应后端方法 HttpUtility.UrlDecode

 2. encodeURI 编码

编码方法 encodeURI / encodeURIComponent : 对应后端方法 HttpUtility.UrlEncode

相应解码方法 decodeURI / decodeURIComponent  : 对应后端方法 HttpUtility.UrlDecode

关于encodeURI、encodeURIComponent编码的一点小总结

由于encodeURI会排除对Url请求路径包含的字符进行编码,不像encodeURIComponent连Url中的协议和路径、参数分隔符【:/?&】都进行编码,因此encodeURI更像是浏览器地址栏编码转换所采用的行为,而针对开放给客户输入并传递给后端处理的数据为了防止客户输入还特殊分隔符字符,应该采用encodeURIComponent更适合【详细例子可见本人另一篇博文:【精选】Ajax Post提交参数的值中带有html标签不能提交到后端的解决办法(ASP.NET)-CSDN博客】。

前后端中Url编码方法的一点小区别(encodeURI与HttpUtility.UrlEncodeUnicode、encodeURIComponent与HttpUtility.UrlEncode)_第3张图片

“前后端Url编码结果不尽相同,反过来解码结果相同”的举例:

//【过时escape】
//JS:
escape('https://www.baidu.com/?x=123;,/?:@#&=+$中文')    【说明:escape方法已过时】

//结果:"https%3A//www.baidu.com/%3Fx%3D123%3B%2C/%3F%3A@%23%26%3D+%24%u4E2D%u6587"

//.Net:
System.Web.HttpUtility.UrlEncodeUnicode("https://www.baidu.com/?x=123;,/?:@#&=+$中文")

//结果:"https%3a%2f%2fwww.baidu.com%2f%3fx%3d123%3b%2c%2f%3f%3a%40%23%26%3d%2b%24%u4e2d%u6587"

//【encodeURI / encodeURIComponent】
//JS:
encodeURI('https://www.baidu.com/?x=123;,/?:@#&=+$中文')

//结果:"https://www.baidu.com/?x=123;,/?:@#&=+$%E4%B8%AD%E6%96%87"

encodeURIComponent('https://www.baidu.com/?x=123;,/?:@#&=+$中文')

//结果:"https%3A%2F%2Fwww.baidu.com%2F%3Fx%3D123%3B%2C%2F%3F%3A%40%23%26%3D%2B%24%E4%B8%AD%E6%96%87"

//.Net:
System.Web.HttpUtility.UrlEncode("https://www.baidu.com/?x=123;,/?:@#&=+$中文")

//结果:"https%3a%2f%2fwww.baidu.com%2f%3fx%3d123%3b%2c%2f%3f%3a%40%23%26%3d%2b%24%e4%b8%ad%e6%96%87"



/*【以上所有编码都能通过HttpUtility.UrlDecode解码还原出一样的结果】:*/

System.Web.HttpUtility.UrlDecode("https%3A//www.baidu.com/%3Fx%3D123%3B%2C/%3F%3A@%23%26%3D+%24%u4E2D%u6587")
//结果:"https://www.baidu.com/?x=123;,/?:@#&= $中文"

System.Web.HttpUtility.UrlDecode("https%3a%2f%2fwww.baidu.com%2f%3fx%3d123%3b%2c%2f%3f%3a%40%23%26%3d%2b%24%u4e2d%u6587")
//结果:"https://www.baidu.com/?x=123;,/?:@#&=+$中文"

System.Web.HttpUtility.UrlDecode("https://www.baidu.com/?x=123;,/?:@#&=+$%E4%B8%AD%E6%96%87")
//结果:"https://www.baidu.com/?x=123;,/?:@#&= $中文"

System.Web.HttpUtility.UrlDecode("https%3A%2F%2Fwww.baidu.com%2F%3Fx%3D123%3B%2C%2F%3F%3A%40%23%26%3D%2B%24%E4%B8%AD%E6%96%87")
//结果:"https://www.baidu.com/?x=123;,/?:@#&=+$中文"

System.Web.HttpUtility.UrlDecode("https%3a%2f%2fwww.baidu.com%2f%3fx%3d123%3b%2c%2f%3f%3a%40%23%26%3d%2b%24%e4%b8%ad%e6%96%87")
//结果:"https://www.baidu.com/?x=123;,/?:@#&=+$中文"

//【前端解码在此不再一一罗列】

参考文章:

https://blog.csdn.net/cplvfx/article/details/116644635

https://cplvfx.blog.csdn.net/article/details/114586854

官方文档:

escape() - JavaScript | MDN

encodeURI() - JavaScript | MDN

encodeURIComponent() - JavaScript | MDN

你可能感兴趣的:(Javascript,url编码,Url,Encode)