`
kayo
  • 浏览: 557966 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

Ajax乱码解决终极方案

阅读更多

CAnca

-----------------------------------------------------------------------------------

原创作品,CAnca Software Office.如要转载,请保留版权信息!

http://cancait.blog.163.com  

E-mail:cancait@msn.com

-----------------------------------------------------------------------------------

1.       使用 JS 中的 encodeURIComponent encodeURI 方法。

说明:

 

encodeURIComponent(String)

对传递参数进行设置。不编码字符有 71 个: ! ' ( ) * - . _ ~ 0-9 a-z A-Z

例:

var url = “<a href=’http://cancait.blog.163.com/name=” + encodeURIComponent(“ 中国 ”) + “’> 中国 </a>”;

 

encodeURI(String)

URL 整体转换。不编码字符有 82 个: ! # $ & ' ( ) * + ,,, - . / : ; = ? @ _ ~ 0-9 a-z A-Z

例:

var url = “<a href=’” + encodeURI(“http://cancait.blog.163.com/name= 中国 ”) + “’> 中国 </a>”;

 

乱码处理实例:

/////////////////////////////////////////////////////////////////////////////////////

初始页面内容如下 (hello.jsp)

/////////////////////////////////////////////////////////////////////////////////////
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%String path = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
     <title>AJAX
提交页面 </title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <script type="text/javascript">
     function justdo(){
   var post="name=
王力猛 &email=wallimn@sohu.com&bokee=http://wallimn.bokee.com ";
   post = encodeURI(post);
   post = encodeURI(post);//
两次,很关键
   var xmlObj = new ActiveXObject('Msxml2.XMLHTTP');
   var URL = '<%= path%>/page/act.jsp';//
文件名需要调整成测试时的相应位置 ?
   xmlObj.open ('post'
URL true);
   xmlObj.setrequestheader("cache-control"
"no-cache");
   xmlObj.setrequestheader("Content-Type"
"application/x-www-form-urlencoded");
   xmlObj.send (post);//
注意 :POST 方式,使用这个来发送内容 ?
    }
    </script>
   </head>  
   <body>
   <input type="button" value="
提交 " onclick="justdo()"/>
    </body>
</html>
/////////////////////////////////////////////////////////////////////////////////////
   ajax 请求处理页面( act.jsp )的内容如下 :
/////////////////////////////////////////////////////////////////////////////////////
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%String path = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
%@page import="java.net.URLDecoder"%>
<html>
   <head>
     <title>ajax deal</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
   </head>
   <body>
   <%
   //
遍历输出参数内容。
   for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
    String h = (String) e.nextElement();
    String v = request.getParameter(h);
    String mm =   java.net.URLDecoder.decode(v
"UTF-8");
    System.out.println("
请求参数 : " + h + " = " + mm);
   }
    %>
   </body>
</html>
/////////////////////////////////////////////////////////////////////////////////////

 

说明:

java.net.URLencode java.net.URLDecode 分别对应于 JavaScript 中的 encodeURI decodeURI encodeURIComponent decodeURIComponent.

 

为什么要连续两次调用 encodeURI(String) 方法呢?是因为 Java 中的 request.getParameter(String) 方法会进行一次 URI 的解码过程,调用时内置的解码过程会导致乱码出现。而 URI 编码两次后, request.getParameter(String) 函数得到的是原信息 URI 编码一次的内容。接着用 java.net.URLDecoder.decode(String str,String codename) 方法,将已经编码的 URI 转换成原文。

2.       使用 JS 中的 escape 方法。

说明:

escape(String)

0-255 以外的 unicode 值进行编码时输出 %u**** 格式,其它情况下 escape encodeURI encodeURIComponent 编码结果相同。

例:

var url = “<a href=’http://cancait.blog.163.com/name=” + escape (“ 中国 ”) + “’> 中国 </a>”;

 

乱码处理实例:

/////////////////////////////////////////////////////////////////////////////////////

例子跟上面一样。只有这里不同。

(hello.jsp)

post = escape(post);
   post = escape (post);//
两次,很关键

       

(act.jsp)

String h = (String) e.nextElement();
    String v = request.getParameter(h);
String mm =   EscapeUnescape.unescape( v
"UTF-8");
    System.out.println("
请求参数 : " + h + " = " + mm);


/////////////////////////////////////////////////////////////////////////////////////

(EscapeUnescape.java)Java 中的 escape unescape. 内容如下:

/////////////////////////////////////////////////////////////////////////////////////

package cn.kgnews.util;

 

public class EscapeUnescape {

public static String escape(String src) {

int i;

char j;

StringBuffer tmp = new StringBuffer();

tmp.ensureCapacity(src.length() * 6);

 

for (i = 0; i < src.length(); i++) {

 

        j = src.charAt(i);

       

        if (Character.isDigit(j) || Character.isLowerCase(j)

                || Character.isUpperCase(j))

        tmp.append(j);

        else if (j < 256) {

        tmp.append("%");

                if (j < 16)

                tmp.append("0");

        tmp.append(Integer.toString(j 16));

        } else {

        tmp.append("%u");

        tmp.append(Integer.toString(j 16));

        }

        }

return tmp.toString();

}

 

public static String unescape(String src) {

StringBuffer tmp = new StringBuffer();

tmp.ensureCapacity(src.length());

int lastPos = 0 pos = 0;

char ch;

while (lastPos < src.length()) {

        pos = src.indexOf("%" lastPos);

        if (pos == lastPos) {

                if (src.charAt(pos + 1) == 'u') {

                ch = (char) Integer.parseInt(src

                        .substring(pos + 2 pos + 6) 16);

                tmp.append(ch);

                lastPos = pos + 6;

                } else {

                ch = (char) Integer.parseInt(src

                        .substring(pos + 1 pos + 3) 16);

                tmp.append(ch);

                lastPos = pos + 3;

                }

        } else {

                if (pos == -1) {

                tmp.append(src.substring(lastPos));

                lastPos = src.length();

                } else {

                tmp.append(src.substring(lastPos pos));

                lastPos = pos;

                }

        }

        }

return tmp.toString();

}

}

 

/////////////////////////////////////////////////////////////////////////////////////

说明:

EscapeUnescape.java 类是 Java 中的 escape unescape

原理跟上例一样。

 

3.       JavaScript 实现 java 中的 URLencode URLdecode.

说明:

这种方法服务器端代码不必修改。直接 request.getParameter() 来获取就可以了。

 

JavaScript 中的 URLencode URLdecode 实现如下:

 

/////////////////////////////////////////////////////////////////////////////////////

(UrlEncodeUrlDecode_gecko.js) IE 实现方法如下:

完整代码可到这里下载:

http://www.blueidea.com/user/qswh/qswhU2GB.js

/////////////////////////////////////////////////////////////////////////////////////

var qswhU2GB = […..]; // 此数组为 GB Unicode 对照表

 

function UrlEncode(str){

var i c ret="" strSpecial="!\"#$%&'()*+ /:;<=>?@[\]^`{|}~%";

for(i=0;i<str.length;i++){

if(str.charCodeAt(i)>=0x4e00){

        c=qswhU2GB[str.charCodeAt(i)-0x4e00];

        ret+="%"+c.slice(0 2)+"%"+c.slice(-2);

        }

else{

        c=str.charAt(i);

        if(c==" ")

        ret+="+";

        else if(strSpecial.indexOf(c)!=-1)

        ret+="%"+str.charCodeAt(i).toString(16);

        else

        ret+=c;

        }

}

return ret;

}

function UrlDecode(str){

var i c d t p ret = "";

function findPos(str){

for(var j = 0; j < qswhU2GB.length; j++){

        if(qswhU2GB[j] == str){

        return j;

        }

        }

return -1;

}

 

for(i = 0;i < str.length;){

        c = str.charAt(i);i++;

if(c != "%"){

        if(c == "+"){

        ret += " ";

        }else{

        ret += c;

        }

}else{

        t = str.substring(i i+2);i += 2;

        if(("0x" + t) > 0xA0){

                d = str.substring(i+1 i+3);i += 3;

                p = findPos(t + d);

        if(p != -1){

                ret += String.fromCharCode(p + 0x4e00);

                }

        }else{

        ret += String.fromCharCode("0x" + t);

        }

        }

}

return ret;

}

 

function getSpell(str sp){

var i c t ret="";

if(sp==null)sp="";

for(i=0;i<str.length;i++){

if(str.charCodeAt(i)>=0x4e00){

        c=parseInt(qswhU2GB[str.charCodeAt(i)-0x4e00] 16);

        if(c<55290){

        for(t=qswhSpell.length-1;t>0;t=t-2)if(qswhSpell[t]<=c)break;

        if(t>0)ret+=qswhSpell[t-1]+sp;

        }

        }

}

return ret.substr(0 ret.length-sp.length);

}

 

/////////////////////////////////////////////////////////////////////////////////////

(UrlEncodeUrlDecode_ie.js)IE 实现方法如下:

/////////////////////////////////////////////////////////////////////////////////////

function UrlEncode(str) {

var ret = "";

var strSpecial = " ~!\"#$%&'()*+- /:;<=>?[]^`{|}~%";

for (var i = 0; i < str.length; i++) {

var chr = str.charAt(i);

strstr = chr;

execScript("c = hex(asc(strstr))" "VBScript");

        if (parseInt("0x" + c) > 127) {

        ret += "%" + c.slice(0 2) + "%" + c.slice(-2);

        } else {

        if (strSpecial.indexOf(chr) != -1) {

        ret += "%" + c.toString(16);

        } else {

        ret += chr;

        }

        }

}

return ret;

}

function UrlDecode(str) {

var ret = "";

for (var i = 0; i < str.length; i++) {

var chr = str.charAt(i);

        if (chr == "+") {

        ret += " ";

        } else {

        if (chr == "%") {

        var asc = str.substring(i + 1 i + 3);

                if (parseInt("0x" + asc) > 127) {

                temp = parseInt("0x" + asc + str.substring(i + 4 i + 6));

                execScript("rt = chr(temp)" "VBScript");

                ret += rt;

                i += 5;

                } else {

                temp = parseInt("0x" + asc);

                execScript("ret = ret + chr(temp)" "VBScript");

                i += 2;

                }

        } else {

        ret += chr;

        }

        }

}

return ret;

}

 

/////////////////////////////////////////////////////////////////////////////////////

(loadcssorjs.js) 自动识别浏览器动态导入 JS/CSS

实现方法如下:

/////////////////////////////////////////////////////////////////////////////////////

/*

CopyRight(C)CAnca Software Office.

Created by CAnca.2007.9.4

*/

 

function LoadScript(url) {

document.write("<scr" + "ipt type=\"text/javascript\" src=\"" + url + "\" onerror=\"alert('Error loading ' + this.src);\"></scr" + "ipt>");

}

function LoadCss(url) {

document.write("<link href=\"" + url + "\" type=\"text/css\" rel=\"stylesheet\" onerror=\"alert('Error loading ' + this.src);\" />");

}

 

 

var sSuffix = /msie/.test(navigator.userAgent.toLowerCase()) ? "ie" : "gecko";

LoadScript("js/UrlEncodeUrlDecode_" + sSuffix + ".js");

 

使用方法:

将三个 JS 文件放在同目录。在页面导入 loadcssorjs.js 。在要进行编码的地方使用 UrlEncode 方法即可。

例:

//index.html

<html>

<head>

<script language=”javascript” src=”js/loadcssorjs.js”></script>

<script language=”javascript”>

        var url = “ http://cancait.blog.163.com/name= ” + UrlEncode (“ 中国人 ”);

        window.open(url);

</script>

</head>

<body>

…..

</body>

</html>

 

三种解决方案的比较:

 

第一种, 在服务器端需要一次 java.net.URLdecode(String) 转码。使用起来,不太方便。

第二种, 要建立 Java 版的 escape uncape 。在服务器端还是需要一次 uncape 转码。使用起来,不太方便。

第三种, 是最方便的一种方法。只需要客户端进行编码。服务器端可以不做任何修改。唯一缺点的是: firefox 浏览网页时,要加载一个 150K UrlEncodeUrlDecode_gecko.js 文件。影响了浏览速度。(但本人还是推荐使用这方案。)

 

总结:

当然, Ajax 实现不乱码,可以不用这三种方案,用这三种方案,只是迫不得已的做法。通常造成乱码的原因有以下几点:

1. xmlhttp  返回的数据默认的字符编码是 utf-8 ,如果前台页面是 gb2312 或者其它编码数据就会产生乱码。

2. post 方法提交数据默认的字符编码是 utf-8 ,如果后台是 gb2312 或其他编码数据就会产生乱码。

 

解决方法:

 

­ 推荐方法:由于 Javascript 沿用 java 的字符处理方式,内部是使用 unicode 来处理所有字符的。 前台后台都用 utf-8 编码,这样可以省不少麻烦,从根本上解决了乱码问题 . 优点是效率高,而且符合目前的形式, utf-8 编码本身就是一种比较优秀的编码,没有语言限制 . 缺点只能调用自己的后台编码或者其他的 utf-8 的编码。

 

前台更改为

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

后台 asp 中第一行加入如下代码

分享到:
评论
1 楼 cai555 2009-09-23  
str= encodeURI(str);
str= encodeURI(str);
|
V
java.net.URLDecoder.decode(v ,  "UTF-8");

试过可以的,真牛B!

相关推荐

    Ajax中文乱码问题解决方案

    本文将深入探讨Ajax中文乱码问题的成因,并提供一系列解决方案。 **一、问题原因** 1. **编码格式不一致**:服务器与客户端(浏览器)之间使用的字符编码格式不同,例如服务器使用GBK编码,而浏览器使用UTF-8编码...

    ajax乱码解决方案

    总的来说,解决Ajax乱码问题的关键在于理解字符编码的工作原理,确保数据在整个传输过程中的编码与解码一致性,以及正确设置服务器和客户端的编码设置。在实际应用中,还应考虑跨平台和跨浏览器的兼容性,以确保解决...

    Ajax乱码解决方案(docx)

    解决Ajax乱码问题的关键在于确保整个数据传输链路上的编码一致性。 1. **字符编码** - **UTF-8**:广泛使用的编码格式,支持多种语言,包括中文,且与CPU字节顺序无关,具有较高的容错能力。 - **GBK/GB2312**:...

    Ajax乱码解决方案

    ### Ajax乱码解决方案 在进行Ajax开发的过程中,经常会遇到数据编码问题导致的乱码现象。这类问题虽然看似简单,但若处理不当,则可能耗费大量时间进行调试与解决。本文将结合一个具体的案例来探讨如何有效地解决...

    jquery的ajax编码乱码解决方案

    简单整理的乱码处理方案,jquery的ajax解决UTF-8以及GBK的问题

    struts,ajax乱码解决方案

    【Struts和Ajax乱码解决方案】 在Web开发中,乱码问题始终是一个常见的困扰,特别是对于使用Struts和Ajax技术的开发者来说。乱码问题主要出现在数据的输入、传输和展示过程中,涉及到编码格式的选择和一致性。以下...

    AJAX乱码解决大全.doc

    ### AJAX乱码问题详解与解决策略 #### 编码基础概览 乱码问题往往源自于数据在传输过程中编码方式的不一致。在探讨AJAX乱码解决之道前,我们首先来了解一下几种常见的编码格式: - **UTF-8**:全球最广泛使用的...

    ajax乱码解决汇总

    本文将深入探讨Ajax乱码问题的成因及其解决方案。 首先,我们需要了解JavaScript和Unicode的关系。JavaScript内部处理字符时,采用的是Unicode编码,这是一种包含几乎全球所有语言字符的通用编码标准。而UTF-8是一...

    Ajax乱码解决办法

    本文将详细探讨Ajax乱码的产生原因以及解决方案。 ### 一、乱码产生的原因 1. **服务器端编码不一致**:如果服务器返回的数据编码格式与客户端(浏览器)的预期编码不同,就会产生乱码。例如,服务器返回UTF-8编码...

    ajax乱码解决办法

    "ajax乱码解决办法"这个主题正是针对这类问题提供解决方案。 首先,我们需要理解Ajax请求中的乱码问题通常源于以下几个方面: 1. **服务器编码设置**:服务器返回的数据可能是以特定的字符编码格式(如GBK或UTF-8...

    乱码问题终极解决方案

    本篇文章将针对"乱码问题终极解决方案"这个主题,深入探讨在Java、JSP和Ajax中如何有效地预防和解决乱码问题。 首先,我们要理解乱码产生的原因。乱码通常是因为字符编码不一致导致的,比如文件编码、程序内部编码...

    ajax到servlet乱码解决

    AJAX 到 Servlet 乱码解决方案 在 Web 开发中,使用 AJAX 通过 URL 传参数给 Servlet 时,经常会遇到乱码问题,即使使用了统一的字符编码也没用。下面我们来探讨这个问题的解决方案。 问题描述 当我们使用 AJAX ...

    GBK编码下jQuery_Ajax中文乱码解决方案

    ### GBK编码下jQuery_Ajax中文乱码解决方案 #### 背景介绍 在Web开发过程中,使用Ajax技术与服务器端交互数据时经常会遇到字符集编码的问题,尤其是在使用GBK编码的环境中,通过jQuery发起的Ajax请求往往会导致...

    Ajax乱码小结

    解决Ajax乱码的关键在于确保客户端和服务端之间的字符集一致,并正确处理参数的编码与解码。通过设置正确的`Content-Type`、使用`encodeURIComponent`对参数进行编码以及使用`URLDecoder.decode`解码,可以有效避免...

    Ajax传参是乱码解决方案

    ### Ajax传参是乱码解决方案 在Web开发过程中,数据编码问题经常会导致各种各样的乱码现象出现。尤其是在使用Ajax进行前后端交互时,如果字符编码处理不当,很容易导致前端发送给后端的数据出现乱码。本文将详细...

    c# ajax post数据乱码解决

    本文将详细讲解如何解决C# Ajax Post数据乱码问题。 ### 一、理解问题根源 首先,我们需要了解为什么会出现乱码的情况。这通常是因为客户端和服务器端对于字符编码的理解不一致所导致的。具体来说,如果客户端使用...

    解决ajax乱码和页面传值问题

    一、解决Ajax乱码问题 Ajax发送和接收数据时,乱码问题主要出现在两个环节:发送请求时的数据编码和服务器返回数据的解码。以下是解决乱码的关键步骤: 1. 数据编码:在发送Ajax请求前,确保你的数据已经正确编码...

    Ajax中文乱码问题解决方法

    首先,我们需要理解Ajax乱码的根源。当JavaScript发送HTTP请求时,如果服务器和客户端之间关于字符编码的约定不一致,就会导致乱码。常见的原因包括: 1. **请求头设置不正确**:Ajax请求默认使用UTF-8编码,但...

    jquery+asp ajax 中文乱码问题解决文档

    ### jQuery + ASP AJAX 中文乱码问题解决方案 在开发基于jQuery和ASP的Web应用程序时,中文乱码问题可能成为困扰开发者的一大难题。特别是在使用Ajax进行前后端数据交互时,中文字符可能会出现乱码现象,影响用户...

Global site tag (gtag.js) - Google Analytics