一次用 AJAX 发送内容给后端的时候,发现后端接收到的内容并不完整。和发送前的内容对比了一下,发现内容中包含一个 & ,从 & 开始内容就被截断了,只包含 & 之前的内容。

因为 URL 的参数是使用 & 连接,内容中包含 & 可能会被误认为是地址,会导致内容从 & 开始被截断。要解决这个问题就需要去除内容中的 & ,对内容进行 URL 编码后即可去除 & 。下面简单写一下 URL 编码和解码。

encodeURI() 函数

encodeURl 函数的功能是对 URL 进行编码,用法如下:

var str = '这是中文';  //  编码前的字符串
var urlStr = encodeURI(str);  //  编码
console.log(urlStr);  //  输出编码后的字符串

编码后的内容如下:

%E8%BF%99%E6%98%AF%E4%B8%AD%E6%96%87

不过 encodeURI 对于 URL 中的特殊符号 例如 / & = 之类的是不会编码的。

下面用 encodeURI 来编码一个 URL 地址:

var str = 'https://www.misterma.com/?s=搜索&page=1';
var urlStr = encodeURI(str);
console.log(urlStr);

编码后的内容如下:

https://www.misterma.com/?s=%E6%90%9C%E7%B4%A2&page=1

可以看到只有中文部分被编码,其它部分还是一样的。

decodeURI() 函数

decodeURI 函数的功能是对 encodeURI 编码后的字符串进行解码。用法如下:

var urlStr = '%E8%BF%99%E6%98%AF%E4%B8%AD%E6%96%87';  //  URL 编码后的字符串
var str = decodeURI(urlStr);  //  解码
console.log(str);  //  在控制台输出解码后的内容

解码后的字符串如下:

这是中文

encodeURIComponent() 函数

encodeURIComponent 函数的功能是对字符串进行 URL 编码。和 encodeURI 不一样的地方就是 encodeURIComponent 会对所有的符号进行编码,包括 &=

用法如下:

var str = 'https://www.xx.com?s=搜索&page=1';  //  编码之前的字符串
var urlStr = encodeURIComponent(str);  //  URL 编码
console.log(urlStr);  //  输出编码后的字符串

编码后的内容如下:

https%3A%2F%2Fwww.xx.com%3Fs%3D%E6%90%9C%E7%B4%A2%26page%3D1

encodeURIComponent 比较适合用来给需要通过 AJAX 发送的内容进行 URL 编码,通过 encodeURIComponent 编码后即可去除 & 之类的特殊字符。如果是通过 URL 拼接的方式来拼接内容的话,只需要编码内容部分。

decodeURIComponent() 函数

decodeURIComponent 函数的功能是对 encodeURIComponent 编码后的字符串进行解码。

用法如下:

var urlStr = 'https%3A%2F%2Fwww.xx.com%3Fs%3D%E6%90%9C%E7%B4%A2%26page%3D1';
var str = decodeURIComponent(urlStr);  //  解码
console.log(str);  //  在控制台输出解码后的字符串

解码后的内容如下:

https://www.xx.com?s=搜索&page=1

以上就是 JavaScript 的 URL 编码和解码。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/841/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji
×