不同编码页面之间用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！ 到目前为止上面这段代码已经可以在市场上的主流浏览器中正常使用了。

以上方法如果您觉得不完美，或者您有更好的解决办法请回复描述一下您的方法，让我们共同进步。

转载于:https://my.oschina.net/u/1780920/blog/375636