原生JS之Ajax中URL编码与解码全攻略

前端

2023-12-10 05:20:04

原生JS中的URL编码与解码：跨域请求中文乱码问题的救星

什么是URL编码与解码？

在跨域请求中，为了符合HTTP协议，浏览器会自动对请求URL进行编码。然而，如果URL中包含中文或特殊字符，编码后的URL可能会出现乱码。这会导致服务器无法正确处理请求，从而导致请求失败。

为了解决这个问题，我们需要对URL进行编码和解码。URL编码就是将URL中的中文或特殊字符转换为安全的字符，而URL解码则是将这些安全的字符还原为原始的中文或特殊字符。

原生JS中的URL编码与解码

原生JS提供了四个用于URL编码和解码的API：

encodeURI()： 对整个URL进行编码。
decodeURI()： 对整个URL进行解码。
encodeURIComponent()： 对URL中的特定部分进行编码。
decodeURIComponent()： 对URL中的特定部分进行解码。

如何使用原生JS进行URL编码与解码？

以下示例代码演示了如何使用原生JS进行URL编码和解码：

// URL编码
const encodedURL = encodeURI('http://example.com/中文');
console.log(encodedURL); // 输出：http://example.com/%E4%B8%AD%E6%96%87

// URL解码
const decodedURL = decodeURI(encodedURL);
console.log(decodedURL); // 输出：http://example.com/中文

// 对URL中的特定部分进行编码
const encodedURIComponent = encodeURIComponent('中文');
console.log(encodedURIComponent); // 输出：%E4%B8%AD%E6%96%87

// 对URL中的特定部分进行解码
const decodedURIComponent = decodeURIComponent(encodedURIComponent);
console.log(decodedURIComponent); // 输出：中文