url 编码 js url传参中文乱码解决方案

2023年5月19日下午5:13 • JavaScript

关于“url 编码 js url传参中文乱码解决方案”的完整攻略，我可以提供以下内容：

什么是 URL 编码？

URL 编码（URL encoding）是对 URL 中非 ASCII 字符和特殊字符进行编码的过程，其中使用了一种编码规则。URL 编码可以确保 URL 中的所有字符在传输过程中都是安全的、可靠的。URL 编码规则如下：

对于 ASCII 字符中的字母、数字和部分符号（-_.~），不做变动；
对于非 ASCII 码点的字符，先将它转换成 UTF-8 编码，再将每个字节转换成十六进制，并在每个字节前添加 %，表示这是 URL 编码；
对于一些需要特殊处理的字符，比如空格、+、/ 等，则也需要通过 URL 编码进行转义。

例如，字符串 "你好，世界" 在 URL 编码后成为了 %E4%BD%A0%E5%A5%BD%2C%E4%B8%96%E7%95%8C。

URL 编码与 JavaScript

在 JavaScript 中，URL 编码和解码一般使用 encodeURI 和 decodeURI 函数、encodeURIComponent 和 decodeURIComponent 函数。其中，encodeURIComponent 函数可以将字符串中的所有非 ASCII 字符和特殊字符进行编码，例如：

const originalStr = "你好，世界";
const encodedStr = encodeURIComponent(originalStr);
console.log(encodedStr); // 输出：%E4%BD%A0%E5%A5%BD%2C%E4%B8%96%E7%95%8C

而 decodeURIComponent 函数可以将编码后的字符串进行解码，还原为原始字符串，例如：

const encodedStr = "%E4%BD%A0%E5%A5%BD%2C%E4%B8%96%E7%95%8C";
const decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr); // 输出：你好，世界

URL 传参中文乱码解决方案

当我们在 URL 中包含中文字符，并希望通过 GET 请求传递时，可能会遇到中文乱码的问题。为了避免这种情况，我们可以采取以下几种解决方案：

方案一：手动进行 URL 编码

我们可以手动将中文字符进行 URL 编码，然后在 GET 请求时将它们作为参数传递给服务器。例如：

const originalStr = "你好，世界";
const encodedStr = encodeURIComponent(originalStr);
const url = "https://example.com?str=" + encodedStr;

// 发送 GET 请求
fetch(url)
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在服务器端，我们只需要对编码后的字符串进行解码，就可以得到原始的中文字符串：

<?php
$str = $_GET['str'];
$decodedStr = urldecode($str);
echo $decodedStr;
?>

方案二：使用 FormData 对象传参

另一种解决方案是使用 FormData 对象来进行传参。通过 FormData 对象，我们可以将需要传递的参数以键值对的形式添加到 FormData 中，然后在发送请求时将其作为第二个参数传递即可。例如：

const formData = new FormData();
formData.append("str", "你好，世界");

// 发送 POST 请求
fetch("https://example.com", {
  method: "POST",
  body: formData
})
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在服务器端，我们可以直接从 POST 请求中获取参数，并将其作为中文字符串进行处理：

<?php
$str = $_POST['str'];
echo $str;
?>

示例

下面是一个完整的示例，可以演示如何通过 URL 编码和 FormData 对象来解决 URL 传参中文乱码的问题：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>URL 传参中文乱码解决示例</title>
</head>
<body>
  <button onclick="sendGetRequest()">发送 GET 请求</button>
  <button onclick="sendPostRequest()">发送 POST 请求</button>

  <script>
    function sendGetRequest() {
      const originalStr = "你好，世界";
      const encodedStr = encodeURIComponent(originalStr);
      const url = "https://example.com?str=" + encodedStr;
      fetch(url)
        .then(response => response.text())
        .then(data => alert("服务器返回：" + data))
        .catch(error => console.error(error));
    }

    function sendPostRequest() {
      const formData = new FormData();
      formData.append("str", "你好，世界");
      fetch("https://example.com", {
        method: "POST",
        body: formData
      })
        .then(response => response.text())
        .then(data => alert("服务器返回：" + data))
        .catch(error => console.error(error));
    }
  </script>
</body>
</html>

当用户点击“发送 GET 请求”或“发送 POST 请求”按钮时，就会向服务器发送 GET 或 POST 请求，并在页面上显示服务器返回的数据。在这个示例中，我们分别演示了使用 URL 编码和 FormData 对象的两种解决方案。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：url 编码 js url传参中文乱码解决方案 - Python技术站