夏日博客

A-A+

JAVASCRIPT中UTF8页面提交数据乱码怎么办

2016年01月27日 前端设计 暂无评论 阅读 5 views 次

一个UTF8页面需要POST数据到GB2312页面，这时中文的编码是按照UTF8提交过去的，GB2312页面无法接收。如何实现，网络搜索了一种很不错的方法，但有缺陷，这里一一说起。

1、FORM标签里加上accept-charset代码，这个能把FORM里的数据自动编码成指定的字符集提交，比如在UTF8页面提交数据到GB2312，代码就是accept-charset=”GB2312″，但accept-charset除了IE其他浏览器都支持。。。

2、这时可以在提交时触发JS，document.charset=’GB2312′;，用这段代码设置当前页面编码为GB2312。到这里看似很完美了，但还一个问题，就是触发这个代码后，当前页面刷新之后会乱码，这是因为你刚才改变了当前页面的编码。

3、怎么处理刷新后乱码呢，就是要加以判断，判断当前页面编码和默认的编码是否一致，如果不一致则刷新，代码如下:

document.charset!=”utf-8″)location.reload(false)

4、网上的介绍最多到这步，但是我却发现，这样就步入了一个死循环，因为第2步已经改变了编码，您在当前页面不管怎样刷新，还是改变后的编码，所以一定要重设这个编码才行，代码就是这样的。

  1. if(isIE && document.charset!=”utf-8″){  
  2. document.charset=’utf-8′;  
  3. location.reload(false);}  

代码综合起来如下,判断当前页码是否为UTF8，如果不是，则设定编码为UTF8并刷新，避免乱码,代码如下:

  1. var isIE=!!window.ActiveXObject;  
  2. if(isIE && document.charset!=”utf-8″){  
  3. document.charset=’utf-8′;  
  4. location.reload(false);}  

设定FORM的accept-charset，让非IE浏览器直接提交编码后的数据到其他页面,代码如下:

  1. <form accept-charset=”GB2312″>  

提交数据时触发修改当前页面编码的JS,代码如下:

onsubmit=”if(isIE)document.charset=’GB2312′”

JavaScript中正确的URL编码方式

看过前面的示例，您有没有想过：为什么escape不能解决的问题，JQuery就能解决呢？对于这个问题，我想还是先来看看MSDN中关于escape的说明,MSDN说的很清楚，我也没有必要再做解释,不过，我想有人可能会问,我用POST提交数据呢？那可是不经过URL的。

是的，POST数据时，参数没有放在URL中，但是，仍然采用URL编码,POST数据也采用URL编码,是因为,表单可以采用GET方式提交，那么数据将通过URL提交给服务器,所以提交的数据都要经过URL编码,我们再来看一下$.ajax是如何处理数据的提交过程的.

  1. ajax: function( origSettings ) {  
  2.     var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);  
  3.       
  4.     // ............... 去掉一些无关的代码  
  5.     // convert data if not already a string  
  6.     if (s.data && s.processData && typeof s.data !== "string") {  
  7.         // 注意下面这个调用  
  8.         s.data = jQuery.param( s.data, s.traditional );  
  9.     }  

再来看jQuery.param的实现过程,代码如下:

  1. // Serialize an array of form elements or a set of  
  2. // key/values into a query string  
  3. param: function( a, traditional ) {  
  4.     var s = [];  
  5.     // ............... 去掉一些无关的代码  
  6.       
  7.     // If an array was passed in, assume that it is an array of form elements.  
  8.     if ( jQuery.isArray(a) || a.jquery ) {  
  9.         // Serialize the form elements  
  10.         jQuery.each( a, function() {  
  11.             add( this.name, this.value );  
  12.         });  
  13.           
  14.     } else {  
  15.         // ............... 去掉一些非重点代码  
  16.     }  
  17.     // Return the resulting serialization  
  18.     return s.join("&").replace(r20, "+");  
  19.     function add( key, value ) {  
  20.         // If value is a function, invoke it and return its value  
  21.         value = jQuery.isFunction(value) ? value() : value;  
  22.         s[ s.length ] = encodeURIComponent(key) + "=" + encodeURIComponent(value);  
  23.     }  
  24. }  

这段代码的核心就是add函数的实现了，它在内部调用了encodeURIComponent()函数,我们应该注意JQuery对数据的处理方式：encodeURIComponent(key) + "=" + encodeURIComponent(value);JQuery在最后还把%20还替换成 + 号了。

在WEB开发领域，我想大家对JQuery的权威应该不用怀疑吧？ 所以我认为JQuery的方法肯定是正确的,从JQuery的实现方式也可以看出,encodeURI()其实也是不推荐在编码URL数据时使用的,说到这里，我要说说为什么不推荐使用encodeURI。

encodeURI用于对整个URL字符串进行编码，如果某个参数值本身包含一些特殊字符,例如:key = "x?x/x&x", value = "aa=2&bb=3&cc=汉字。"，这个函数的结果将会不正确。

它通常用于编码URL路径中包含有类似汉字这种场合，不适合处理URL参数,但是,URL路径中的目录名与文件名，我们可以选择英文字符，所以encodeURI通常没有机会使用。

标签：

给我留言