AJAX中的中文乱码解决

测试的是ajax in practice第一章中的hello2.jsp+hello2.html。
当我在文本框中输入中文时,返回的页面中出现了乱码
最后解决的方法时:
1、tomcat的conf/server.xml中添加编码:

    <Connector port="8080" protocol="HTTP/1.1" 
               connectionTimeout
="20000" 
               redirectPort
="8443"
               URIEncoding
="utf-8" />
2、web应用的web.xml中配置编码过滤:
    <filter> 
        
<filter-name>Set Character Encoding</filter-name> 
        
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 
        
<init-param> 
            
<param-name>encoding</param-name> 
            
<param-value>utf-8</param-value> 
        
</init-param> 
    
</filter> 
    
    
<filter-mapping> 
        
<filter-name>Set Character Encoding</filter-name> 
        
<url-pattern>/*</url-pattern> 
    
</filter-mapping>
3、页面设置
html中使用utf-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
jsp中也使用utf-8
<jsp:directive.page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"/>
4、html中对传递的参数进行编码:
            var name = $('helloTxt').value;
            name 
= encodeURI(name);
5、JSP中对传入的参数进行解码:
request.setCharacterEncoding("UTF-8");
String name 
= request.getParameter("name");
name 
= java.net.URLDecoder.decode(name,"utf-8");

在完成这些操作后,经过测试,IE6/Opera9.5/Firefox2中均未再出现参数乱码的现象。
但是很奇怪的是,这些浏览器都不能自动识别hello2.html为utf-8,而是识别为ISO-8859-1。所以显示为乱码。但是提交后,返回的那些新文字却是正常显示:

奇怪的正常文字与乱码并存

最终发现:因为测试系统搭建时引入了struts2,并且在struts.properties中加入了如下一行“struts.locale=en_GB”。去掉或者修改为“struts.locale=zh_GB”一切都正常了。


完整的代码如下:
1、hello2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello Ajax version 2</title>
<style type="text/css">
*
{font-family:Tahoma, Arial, sans-serif;}
#helloTitle
{color:#48f;}
</style>
<script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
    window.onload
=function(){
        $(
'helloBtn').onclick=function(){
            
var name = $('helloTxt').value;
            
//alert(escape(name));
            //alert(encodeURI(name));
            name = encodeURI(name);
            
//alert(name);
            new Ajax.Request(
                
"hello2.jsp?name=" + name,
                
{
                    method:
"get",
                    onComplete:
function(xhr){
                        $(
'helloTitle').innerHTML = xhr.responseText;
                    }

                }

            );
        }
;
    }
;
</script>
</head>
<body>
    
<div id="helloTitle">
        
<h1>您好,陌生人</h1>
    
</div>
    
<p>请在下方的文本框中输入您的姓名来介绍您自己:</p>
    
<input type="text" size="24" id="helloTxt" />&nbsp;
    
<button id="helloBtn">提交</button>
</body>
</html>
2、hello2.jsp
<jsp:directive.page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"/><%
request.setCharacterEncoding(
"UTF-8");
String name = request.getParameter("name");
name 
= java.net.URLDecoder.decode(name,"utf-8");
%><h1>您好 <%=name%></h1>
<p>我过去认识一个叫 <b><i><%=name%></i></b> 的,是您吗?</p>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值