wuxiren123

My Links

Blog Stats

Posts - 61
Stories - 0
Comments - 0
Trackbacks - 0

常用鏈接

留言簿

隨筆檔案

搜索

閱讀排行榜

評(píng)論排行榜

關(guān)于JS的編碼轉(zhuǎn)換問(wèn)題

在進(jìn)行JS開(kāi)發(fā)過(guò)程中，尤其是在開(kāi)發(fā)報(bào)表時(shí)，報(bào)表已集成到Web頁(yè)面中，通過(guò)在頁(yè)面?zhèn)鬟f參數(shù)至報(bào)表中時(shí)，會(huì)發(fā)現(xiàn)有時(shí)某些參數(shù)值，傳遞到報(bào)表中是顯示為問(wèn)號(hào)或亂碼等等一系列不能正常顯示的情況。

這是由于瀏覽器和報(bào)表服務(wù)器的編碼不同，字符多次進(jìn)行編碼轉(zhuǎn)換時(shí)出現(xiàn)錯(cuò)誤導(dǎo)致字符的顯示出現(xiàn)亂碼，尤其是中日韓文和特殊字符更容易出現(xiàn)亂碼問(wèn)題。

以開(kāi)發(fā)報(bào)表軟件FineReport為例，在給報(bào)表服務(wù)器發(fā)送請(qǐng)求之前，對(duì)URL或者只對(duì)URL里面的參數(shù)名字和參數(shù)值，進(jìn)行cjkEncode的編碼，該方式兼容了各種不同的字符集，如ISO8859-1、 UTF-8、 GBK、 ENU_JP，尤其對(duì)中日韓文的處理采取了統(tǒng)一的方案。

javascript中FineReport字符轉(zhuǎn)換原理

在給報(bào)表服務(wù)器發(fā)送請(qǐng)求之前，對(duì)URL或者只對(duì)URL里面的參數(shù)名字和參數(shù)值，進(jìn)行cjkEncode的編碼。源碼如下：

function cjkEncode(text) {

if (text == null) {

return "";

}

var newText = "";

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

var code = text.charCodeAt (i);

if (code >= 128 || code == 91 || code == 93) {//91 is "[", 93 is "]".

newText += "[" + code.toString(16) + "]";

} else {

newText += text.charAt(i);

}

return newText;

}

經(jīng)過(guò)編碼的URL或者Form表單，報(bào)表服務(wù)器智能的將這些字符正確的轉(zhuǎn)換過(guò)來(lái)。

cjkEncode方法在FineReport的JS庫(kù)中已經(jīng)預(yù)先提供了，用戶只要加載了FR的JS庫(kù)，就可以使用FR.cjkEncode對(duì)中日韓文字符進(jìn)行encode，如下示例：

1、對(duì)URL進(jìn)行cjkEncode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript"    src="ReportServer?op=emb&resource=finereport.js"></script>
<Script Language="JavaScript">
function frOpen() {
    window.location=FR.cjkEncode("http://localhost:8075/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt&地區(qū)=華東");
}
</Script>
</head>
<body>
<input type="button" value="字符轉(zhuǎn)換1" onclick="frOpen()">
</body>
</html>

如果只對(duì)參數(shù)值進(jìn)行編輯轉(zhuǎn)換，在參數(shù)后面調(diào)用FR.cjkEncode()方法，如：

window.location="http://localhost:8075/WebReport/ReportServer?reportlet=reportname.cpt¶name="+FR.cjkEncode("華東");

2、對(duì)Form表單進(jìn)行cjkEncode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
<script>
function autoSubmit() {
    var Region1 = document.getElementById('Region');     //獲取到參數(shù)Region所在文本框
    Region1.value = FR.cjkEncode(Region.value);         //對(duì)值參數(shù)值進(jìn)行編碼轉(zhuǎn)化
    Region1.name = FR.cjkEncode("地區(qū)");               //對(duì)參數(shù)控件名編碼轉(zhuǎn)換，如果參數(shù)名字為英文，則不需要此操作
    document.FRform.submit();
}
</script>
<body>
<form name=FRform method=post action="/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt">
<input type="text" id="Region" name="地區(qū)" value="華東">
<input type="button" name="show" value= "查看" onclick="autoSubmit()"/>
</body>
</html>

3、特殊符號(hào)處理

如果在需要進(jìn)行cjkEncode的URI的參數(shù)中包含特殊字符，比如%，#，$，=，&，/，?，+，@等字符時(shí)，需要在cjkEncode之后，再次調(diào)用javascript的encodeURIComponent對(duì)這些特殊字符進(jìn)行編碼。如參數(shù)值是”%華%“這樣的字符，就需要寫(xiě)成encodeURIComponent(FR.cjkEncode("%華%"))，一定要先進(jìn)行cjkEncode，然后再進(jìn)行encodeURIComponent，完整代碼如下：

<html>

<head>

function frOpen() {

window.location=FR.cjkEncode("http://localhost:8075/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt&地區(qū)=") +encodeURIComponent(FR.cjkEncode("%華%"));

}

</Script>

</head>

<body>

</body>

</html>

posted on 2016-08-11 15:26 喝水居然長(zhǎng)肉閱讀(98) 評(píng)論(0) 編輯收藏

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理