Ajax中文乱码问题解决方法

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>
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值