不一樣編碼頁面之間用form傳值出現亂碼問題解決方案 utf-8 到 gb2312

相信有人也曾遇到過這種問題，今天將這個問題稍做整理髮布出來。

 

因爲編碼的問題傳值出現亂碼，一看到這樣的狀況，咱們首先想到的是線面的兩種解決辦法：

 

方案一：在接收參數頁面進行轉碼  （這是較爲理想的解決辦法）

方案二：改變提交頁面的編碼方式

 

 

以上解決辦法，若是讓我選擇，那固然選擇方案一了。但是我是一名頁面製做人員，沒法處理開發的程序，因此再來看方案二。

 

具體遇到的問題在這裏 http://zhidao.kaiyun.china.com/browse_rank.do?channelId=0  右側的表單提交

該列表頁以及詳細頁面均會提交數據，看了這麼多的頁面，再想 有可能別的地方還會遇到不一樣編碼傳遞數據的問題，因此很顯然 方案二並非很理想。

 

有沒有一種辦法是在提交數據以前將內容轉碼後再提交呢？這樣既不用經過開發調整接收端程序，也不用改變頁面原有的編碼。

 

有了這種念頭，天然想到用JS來實現。

 

太美好了！在JS中所提供的document.charset能夠作到這一點，不過這個方法只侷限於IE使用，要兼容Firefox及其餘瀏覽器須要用到另一種方法 form.acceptCharset （該方法屬性由王昊提供）

 

以上兩種方法在使用中必須注意，charset方法使用document就能夠，不過acceptCharset必須指定到該form才能夠正常使用。

 

如下是實際應用的代碼：（將代碼保存爲html格式便可預覽）

<meta http-equiv=」Content-Type」 content=」text/html; charset=UTF-8″ />
<!–  姓名五格配對  –>
      <SCRIPT language=javascript>
<!–
function CheckPD(theForm)
{
var name1 = theForm.name1.value;
if (name1 == 「」)
{
alert(「請輸入您的姓名！」);
theForm.name1.value=」";
theForm.name1.focus();
return false;
}
if (theForm.name1.value.length < 2 || theForm.name1.value.length>4)
{
alert(「錯誤：名字應在2-4個字之間！」);
theForm.name1.focus();
return (false);
}
if (name1.search(/[`1234567890-=\~!@#$%^&*()_+|<>;':",.?/ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz]/) != -1)
{
alert(「請務必輸入簡體漢字！」);
theForm.name1.value = 「」;
theForm.name1.focus();
return false;
}
var name2 = theForm.name2.value;
if (name2 == 「」)
{
alert(「請輸入您愛人的名字！」);
theForm.name2.value=」";
theForm.name2.focus();
return false;
}
if (theForm.name2.value.length < 2 || theForm.name2.value.length>4)
{
alert(「錯誤：名字應在2-4個字之間！」);
theForm.name2.focus();
return (false);
}
if (name2.search(/[`1234567890-=\~!@#$%^&*()_+|<>;':",.?/ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz]/) != -1)
{
alert(「請務必輸入簡體漢字！」);
theForm.name2.value = 「」;
theForm.name2.focus();
return false;
}
setTimeout(function(){document.charset=’UTF-8′;document.form2.acceptCharset=’UTF-8′},1);
}
//–>
</SCRIPT>
       <form name=」form2″ onSubmit=」document.charset=’gb2312′;document.form2.acceptCharset=’gb2312′; return CheckPD(this);」 method=」post」 target=」_blank」 action=」http://suanming.kaiyun.china.com/qinglv/pd_xmwg.asp」 >
       <input type=」hidden」 name=」act」 value=」ok」 />
        <div class=」rigth_Mass」>
          <h3><img src=」/images/page2_titPeidui.gif」 /></h3>
          <div class=」DailyWealth」>
            <div>姓名:<input name=」name1″ type=」text」 id=」name1″ size=」3″ maxLength=」4″> <select name=」xing1″><option value=」1″ selected=」selected」>單姓</option><option value=」2″>複姓</option>
    </select> <select name=」sex1″><option value=」男」 >男</option><option value=」女」 >女</option></select></div>
    <div>姓名:<input name=」name2″ type=」text」 id=」name2″ size=」3″ maxLength=」4″> <select name=」xing2″><option value=」1″>單姓</option><option value=」2″>複姓</option></select> <select name=」sex2″><option value=」男」 >男</option><option value=」女」 selected >女</option></select></div>
    <div style=」text-align:center;」><input type=」image」 src=」/images/page2_button06.gif」 align=」absmiddle」 name=」Submit」 /></div>
          </div>
        </div>
      </form>

以上案例中要注意 form 的onSubmit執行了我以前講到的兩種方法，但是在IE下面所執行的是document.charset 該方法是全局性的，因此改變了整個頁面的編碼格式，因爲UTF-8和gb2312二者對字符的默認解釋不通，因此整個頁面會出現意想不到的變化。這個時候 咱們在CheckPD()函數中加了最後一句 setTimeout 這個方法，讓其在1毫秒以後又改變回原來的編碼格式。這樣作以後在提交表單時真個頁面給人的感受是小閃一下（這是目前存在的BUG還未解決）

 

OK！ 到目前爲止上面這段代碼已經能夠在市場上的主流瀏覽器中正常使用了。

以上方法若是您以爲不完美，或者您有更好的解決辦法請回復描述一下您的方法，讓咱們共同進步。