下面是关于“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技术站
微信扫一扫 
支付宝扫一扫 