xmlhttp 乱码比较完整的解决方法 (UTF8,GB2312 编码解码)

下面是关于“xmlhttp 乱码比较完整的解决方法”的攻略。

问题描述

在使用XMLHttpRequest对象进行请求时，有可能会出现中文乱码的问题，这是因为我们在使用XMLHttpRequest对象时，需要设置编码方式。

解决方法

1. 设置发送请求时的编码

设置XMLHttpRequest对象的charset属性为"UTF-8"，即可保证中文数据传输不会发生乱码。

// 创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
// 设置编码方式
xmlhttp.charset = "UTF-8";
// 发送请求
xmlhttp.send();

2. 设置服务器返回的编码方式

一般情况下，服务器返回的编码方式都是在HTTP头信息中设置的，我们可以通过设置XMLHttpRequest对象的responseType和responseEncoding属性来进行设置。

// 创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
// 设置接收类型
xmlhttp.responseType = "text";
// 设置响应的编码方式
xmlhttp.responseEncoding = "GBK";
// 发送请求
xmlhttp.send();

3. 服务器返回值的编码转换

如果服务器响应的文本是使用GB2312编码格式的，则可以使用iconv-lite库进行编码转换。

var iconv = require('iconv-lite');
// 创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
// 设置接收类型
xmlhttp.responseType = "arraybuffer";
// 发送请求
xmlhttp.send();
// 监听请求完成事件
xmlhttp.onload = function(){
    // 将ArrayBuffer转为字符串
    var str = iconv.decode(new Buffer(xmlhttp.response), 'GBK');
    console.log(str);
};

示例说明

下面，我们来看两个实际的示例。

示例1

在以下示例中，我们使用XMLHttpRequest对象向服务器发送一个GET请求，获取服务器返回的HTML文本，并显示在网页上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例1</title>
  </head>
  <body>
    <div id="content"></div>
    <script>
      // 创建XMLHttpRequest对象
      var xmlhttp = new XMLHttpRequest();
      // 设置编码方式
      xmlhttp.charset = "UTF-8";
      // 监听请求成功事件
      xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            // 将响应文本显示在页面上
            document.getElementById("content").innerHTML = xmlhttp.responseText;
          }
      };
      // 发送请求
      xmlhttp.open("GET", "http://www.example.com/", true);
      xmlhttp.send();
    </script>
  </body>
</html>

在这个示例中，我们设置了XMLHttpRequest对象的charset属性为"UTF-8"，这样可以保证传输的文本不会因编码方式不同而出现乱码。

示例2

在以下示例中，我们使用XMLHttpRequest对象向服务器发送一个POST请求，上传用户的中文昵称和性别，并获取服务器返回的JSON数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例2</title>
  </head>
  <body>
    <form>
      <input type="text" name="nickname" placeholder="请输入您的昵称">
      <select name="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <input type="button" value="提交" onclick="submitForm()">
    </form>
    <div id="result"></div>
    <script>
      function submitForm(){
        // 获取输入框和下拉列表的值
        var nickname = document.getElementsByName("nickname")[0].value;
        var gender = document.getElementsByName("gender")[0].value;
        // 创建XMLHttpRequest对象
        var xmlhttp = new XMLHttpRequest();
        // 设置编码方式
        xmlhttp.charset = "UTF-8";
        // 设置响应类型
        xmlhttp.responseType = "json";
        // 监听请求成功事件
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            // 处理响应数据
            if(xmlhttp.response.code == 0){
              document.getElementById("result").innerHTML = "上传成功";
            }else{
              document.getElementById("result").innerHTML = "上传失败";
            }
          }
        };
        // 设置请求头信息
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 发送请求
        xmlhttp.open("POST", "http://www.example.com/upload.php", true);
        // 将中文昵称用encodeURIComponent方法编码后，再进行传输
        xmlhttp.send("nickname=" + encodeURIComponent(nickname) + "&gender=" + gender);
      }
    </script>
  </body>
</html>

在这个示例中，我们也设置了XMLHttpRequest对象的charset属性为"UTF-8"，同时设置了请求头信息的Content-type为"application/x-www-form-urlencoded"，这样可以保证上传的中文昵称能够正确编码并传输。另外，在处理响应数据时，我们使用了XMLHttpRequest对象的responseType属性，设置响应数据类型为"json"，这样一来，就可以直接将响应数据转换为JSON对象，并对其进行操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：xmlhttp 乱码比较完整的解决方法 (UTF8,GB2312 编码解码) - Python技术站

xmlhttp 乱码 比较完整的解决方法 (UTF8,GB2312 编码 解码)