夏日博客

A-A+

javascript ajax提交数据中文乱码解决办法

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

本文章总结了关于javascript ajax提交数据中文乱码解决办法，这里从js页面乱码到后面的ajax数据乱码的解决方法。

一个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、怎么处理刷新后乱码呢，就是要加以判断，判断当前页面编码和默认的编码是否一致，如果不一致则刷新，代码如下:

if(isIE && 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′”

实例,方法其实很简单,比如页面表单（form）代码如下：

  1. <form name="formname"method="post" action="">  
  2. ……  
  3. </form>  

只需要在该页面增加javascript函数,比如如下代码:

  1. function functionname()  
  2. {  
  3. document.charset="gb2312";  
  4. formname.submit();  
  5. }  

最后，将这个函数增加到form的onsubmit中即可,代码如下:

  1. <form name="formname"method="post" action="" onsubmit=“functionname();”>  
  2. ……  
  3. </form>  

让我们先看一下AJAX 的经典请求代码:

  1. xmlhttp.open( "post", url, async );  
  2. xmlhttp.setRequestHeader( "Content-Type", "text/html" );  
  3. xmlhttp.send( params );  

通过前面的说明，不知道你现在看出端倪了没有。不知道是受了网上教程的影响还是其它方面影响，setRequestHeader 并是万年不变的，也没人想过去改它，而问题就正好出在这个地方。回想一个JSP 页面内容的编码设置，其中有这么一节,代码如下:

contentType="text/html; charset=UTF-8"

现在知道问题了吧，所以我们要把第二句代码改为：

xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );

如果提交的是form ，那么设置为:

"application/x-www-form-urlencoded; charset=UTF-8"

最后别忘了在返回数据时也设置上,代码如下:

response.setContentType( "text/xml" );

response.setCharacterEncoding( "UTF-8" );

如果要问为什么的话，其实我们可以把xmlhttp 看成是一个临时页面，它由浏览器动态生成，主要作用是在后台获得请求的数据（可以看成是一个高级的iframe ）。所以对于普通页面设置的编码，对它也要同样设置。而在servlet 中返回数据为什么要设置contentType 和encoding 其道理也是一样的。众所周知，jsp 的最后形态就是servlet ，而jsp 页首设置的那个内容其实也就是让生成的servlet 中生成这么两句话：

response.setContentType( "text/html" );

response.setCharacterEncoding( "UTF-8" );

而pageEncoding 则是跟jvm 说明了这个页面的内容要使用什么编码保存,这跟之后生成的CLASS 有关系,所以在servlet 设置response 的编码也是理所当然的了,代码如下:

  1. response.setContentType("text/xml;charset=UTF-8");  
  2. response.setHeader("Pragma", "no-cache"); //HTTP 1.0  
  3. response.setDateHeader("Expires", 0); //prevents caching at the proxy server  
  4. PrintWriter out = response.getWriter();  
  5. out.write(outXML);  
  6. out.flush();  
  7. out.close();  

OK,这样向客户端写的数据中的中文也是UTF-8 编码了，客户端js 脚本获取到request.responseXML 也好，responseText 也好，里面的数据都不会有乱码了.

解决json在后台传递中的乱码：

a.Action:

PrintWriter out = response.getWriter();

out.print("啊");

b.action:

BufferedReader bf = new BufferedReader(new InputStreamReader(httppost.getResponseBodyAsStream()));

这里得到的bf.readline会是乱码，解决办法为：在a.Action中 PrintWriter out = response.getWriter(); 前面加上如下代码:

response.setCharacterEncoding("UTF-8");

在b.Action中修改为如下代码:

BufferedReader bf = new BufferedReader(new InputStreamReader(httppost.getResponseBodyAsStream(),"UTF-8"));

总结:

其实我们只要页面与保存数据页面编码统计就是了，同时ajax默认提交数据编码为utf-8的，如果你是GBK的页面我们只要把发送编码修改一下即可。

中文乱码原因在于javascript使用的是UTF-8国际编码，UTF-8每个汉字用4个字节来存储。而我的页面和数据库都用GB2312编码，这就造成了AJAX send数据的时候出现中文乱码的问题

标签：

给我留言