Ajax中文乱码问题解决方案一:
1.向服务器发送数据:
客户端:
var date = document.getElementById("username");
var url = "AjaxServlet?username=" + encodeURI(encodeURI(date.value));
向服务器端发请的数据进行两次encodeURI:
Java 中的 request.getParameter(String)方法会进行一次 URI 的解码过程,
调用时内置的解码过程会导致乱码出现。而 URI 编码两次后,request.getParameter(String)
函数得到的是原信息 URI 编码一次的内容。
接着用 java.net.URLDecoder.decode(String str,String codename) 方法,
将已经编码的 URI 转换成原文。
服务器端:
String username = URLDecoder.decode(request.getParameter("username"),"UTF-8");
System.out.println(username);
2.接收服务器端数据:
原因:AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的,
如果服务器段发送的数据不是UTF-8的格式,那么接收responseText或responseXML的值有可能为乱码。
解决办法:
在服务器指定发送数据的格式:
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String message = "你输入的用户名是:" + username;
PrintWriter out = response.getWriter();
out.println("<response>");
out.println("<passed>" + Boolean.toString(false) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
//客户端接收解析数据:
var mes =xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val =xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
/**
* Ajax中文乱码问题
*
* @author zhangmingxue
*
*/
public class AjaxServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 6930790433539669771L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = URLDecoder.decode(request.getParameter("username"),"UTF-8");
System.out.println(username);
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String message = "你输入的用户名是:" + username;
PrintWriter out = response.getWriter();
out.println("<response>");
out.println("<passed>" + Boolean.toString(false) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
}
<html>
<head>
<title>AjaxEncoding</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function validate()
{
createXMLHttpRequest();
var date = document.getElementById("username");
var url = "AjaxServlet?username=" + encodeURI(encodeURI(date.value));
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var mes =xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val =xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes, val);
}
}
}
function setMessage(message, isValid)
{
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";
if (isValid == "true")
{
fontColor = "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">"+ message + " </font>";
}
</script>
<body>
<input type="text" size="10" id="username" οnchange="validate();" />
<div id="dateMessage"></div>
</body>
</html>