`

js编码处理[转]

JavaScriptCC#C++IE 
阅读更多

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 中第一行加入如下代码

分享到：
| java 与 json 前后台数据使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Node.js-iconv-lite-纯javascript转换字符编码

    iconv-lite - 纯javascript转换字符编码

    javascript处理中文base64编码

    由于遇到做一个支付平台的接口参数要做base64 于是就写了一个用javascript编写的方法，对方支付平台是java的 ，于就将中文做了一个unicode转为assi码处理。

    微信小程序String转gbk编码的byte数组

    项目中用到蓝牙打印机，但是蓝牙打印机只支持gbk编码，而小程序用的是Unicode，此资源解决了Unicode转gbk编码问题

    javascript/微信小程序中将String进行Base64编码并UTF-8格式输出

    提供一种Base64编码,并输出UTF-8格式的BASE64编码方式。本程序在微信小程序开发工具中已经测试通过。 Base64代码： [javascript] view plain copy print? (function(){ var BASE64_MAPPING = [ 'A','B','C','D',...

    js gbk 编码组件

    javascript,gbk 编码组件，UNIC-GBK.js GBK转码组件是为弥补Js编码中GBK无法处理而写的一个组件！

    JavaScript、JavaWeb对汉字等的编码与解码处理

    Java以及JavaScript对汉字编码的策略

    文件编码批量转换程序

    编码的 VBS、JS 或 PHP 脚本，而没有进行大量文件编码转换的工具。 因为时间紧迫，后来只好使用最原始的办法，用 Windows 的记事本打开一个 个 ASP 文件，使用“另存为...”的方式变成 UTF-8 编码。真是郁闷.......

    javaScript处理URL中特殊符号的处理

    有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。编码的格式为：%加字符的ASCII码，即一个百分号%，

    javascript中如何处理引号编码&amp;#034;

    本文为大家介绍下javascript中如何处理引号编码，具体如下，感兴趣的朋友可以参考下

    webview与javascript交互,并解决编码问题

    webview与javascript交互, oc 调用 javascipt 中的 函数 获取网页信息，也可截取 网页的某个动作 来做自己的处理 。并解决 过程中 因中文 遇到的 编码问题。

    常用字符串处理函数-求子字符串,字符串分割,编码转换.

    常用字符串处理函数 求子字符串,字符串分割,编码转换.

    JavaScript编码规范

    JavaScript是一种语法灵活，简单易懂的脚本语言。正因为灵活，因此很多人在...此编码规范融合了多位程序员的编程经验，适用于开发和维护期间，发布代码时可以用工具进行优化处理，剔除注释和空格字符，以提高执行效率。

    handbrake-js:node.js的视频编码转码转换

    它可以处理最常见的多媒体文件以及不包含任何复制保护的任何DVD或BluRay源。 输出： 文件容器：.MP4（.M4V）和.MKV 视频编码器：H.264（x264），H.265（x265）MPEG-4和MPEG-2（libav），VP8（libvpx）和Theora...

    javascript中如何处理引号编码#034;

    1、 ’${jxOrgJsonStr}’ escapeXml=”false”/&gt; 2、或者使用innerText 直接接受${jxOrgJsonStr}的值，就不会被转义了。 有次一哥们在做fckeditor数据展示的时候，出现了html/css全部被展示了，看了下代码，他使用了...

    JS 实现Base64编码与解码实例详解

    Js实现Base64编码与解码 Base64其实是一种简单的置换加密方式，但是BASE64的用处往往并不是为了防止信息泄露，而且为了方便传输，进过BASE64编码后的信息会比原始信息长，大概是4/3倍。 Base64是一种基于64个可打印...

    使用Node.js处理前端代码文件的编码问题

    在读取不同编码的文本文件时，需要将文件内容转换为 JS 使用的 UTF8 编码字符串后才能正常处理。 BOM 的移除 BOM 用于标记一个文本文件使用 Unicode 编码，其本身是一个 Unicode 字符（”\uFEFF”），位于文本文件...

    js播放Amr音频_Mp3转Amr

    AMR 播放器,录音机,转换器, 纯前端js解码、播放、录音、编码 AMR 音频... 详细介绍说明请看 https://blog.csdn.net/tianbbs2008/article/details/120331027

    JS 文件本身编码转换 图文教程

    在百度、谷歌上一搜，大家都是说通过JAVA后台处理来解决编码问题，试问，这样能解决JS文件本身的编码问题吗？ 　之所以提出JS文件本身编码问题，是因为JS文件的编码不同，造成了中文显示为乱码。 　通常，在Eclipse...

    应用组JavaScript编码规范

    本文描述了应用组开发JAVASCRIPT程序的一些基本规范。包括变量声明、函数声明、异常处理等的一些规范和说明。

Magicbox
Global site tag (gtag.js) - Google Analytics