javascript 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步已经改变了编码,您在当前页面不管怎样刷新,还是改变后的编码,所以一定要重设这个编码才行,代码就是这样的。
代码如下 | |
if(isIE && document.charset!=”utf-8″){ |
代码综合起来如下:
判断当前页码是否为UTF8,如果不是,则设定编码为UTF8并刷新,避免乱码。
代码如下 | |
var isIE=!!window.ActiveXObject; |
设定FORM的accept-charset,让非IE浏览器直接提交编码后的数据到其他页面
代码如下 | |
<form accept-charset=”GB2312″> |
提交数据时触发修改当前页面编码的JS
代码如下 | |
onsubmit=”if(isIE)document.charset=’GB2312′” |
实例
方法其实很简单:
比如页面表单(form)代码如下:
代码如下 | |
<form name="formname"method="post" action=""> |
只需要在该页面增加javascript函数,比如:
代码如下 | |
function functionname() |
最后,将这个函数增加到form的onsubmit中即可。即:
代码如下 | |
<form name="formname"method="post" action="" onsubmit=“functionname();”> |
让我们先看一下AJAX 的经典请求代码
代码如下 | |
xmlhttp.open( "post", url, async ); |
通过前面的说明,不知道你现在看出端倪了没有。不知道是受了网上教程的影响还是其它方面影响,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" ); |
如果要问为什么的话,其实我们可以把xmlhttp 看成是一个临时页面,它由浏览器动态生成,主要作用是在后台获得请求的数据(可以看成是一个高级的iframe )。所以对于普通页面设置的编码,对它也要同样设置。而在servlet 中返回数据为什么要设置contentType 和encoding 其道理也是一样的。众所周知,jsp 的最后形态就是servlet ,而jsp 页首设置的那个内容其实也就是让生成的servlet 中生成这么两句话:
代码如下 | |
response.setContentType( "text/html" ); |
而pageEncoding 则是跟jvm 说明了这个页面的内容要使用什么编码保存(这跟之后生成的CLASS 有关系)。所以在servlet 设置response 的编码也是理所当然的了。
代码如下 | |
response.setContentType("text/xml;charset=UTF-8"); response.setHeader("Pragma", "no-cache"); //HTTP 1.0 response.setDateHeader("Expires", 0); //prevents caching at the proxy server PrintWriter out = response.getWriter(); out.write(outXML); out.flush(); out.close(); |
OK !这样向客户端写的数据中的中文也是UTF-8 编码了,客户端js 脚本获取到request.responseXML 也好,responseText 也好,里面的数据都不会有乱码了
7)解决json在后台传递中的乱码:
a.Action:
代码如下 | |
PrintWriter out = response.getWriter(); |
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数据的时候出现中文乱码的问题