Ajax中文乱码解决方案

￡神魔★判官ぃ 2022-06-16 01:46 235阅读 0赞

[ 原文章地址   Ajax中文乱码解决方案最终版-兼容IE和FF  
][Ajax_-_IE_FF]

Ajax技术的核心为[JavaScript][]，而javascript使用的是UTF-8编码，因此在页面采用GBK或者其他编码，同时没有进行编码转换时，就会出现中文乱码的问题。以下是分别使用GET和POST方式传值，并且页面采用GBK和UTF-8编码在IE和FF下的不同[测试][Link 1]结果和出现乱码时的解决方案

<table> 
 <tbody> 
  <tr> 
   <td>传值方式</td> 
   <td>客户端编码</td> 
   <td>服务器端编码</td> 
   <td>IE</td> 
   <td>FF</td> 
   <td>解决方案</td> 
  </tr> 
  <tr> 
   <td>GET</td> 
   <td>UTF-8</td> 
   <td>UTF-8</td> 
   <td>接收$_GET传递的参数时出现乱码</td> 
   <td>正常</td> 
   <td>客户端url=encodeURI(url)</td> 
  </tr> 
  <tr> 
   <td>GET</td> 
   <td>GBK</td> 
   <td>GBK</td> 
   <td>正常</td> 
   <td>接收$_GET传递的参数时出现乱码</td> 
   <td>客户端url=encodeURI(url)<br> 服务器端<br> $str=iconv("UTF-8","GBK",$str)</td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>UTF-8</td> 
   <td>UTF-8</td> 
   <td>接收$_GET传递的参数时出现乱码</td> 
   <td>正常</td> 
   <td>客户端url=encodeURI(url)</td> 
  </tr> 
  <tr> 
   <td><span style="color:#FF0000"><span style="color:#000000">POST</span><br> </span></td> 
   <td>UTF-8</td> 
   <td>UTF-8</td> 
   <td><span style="color:#FF0000">接收$_POST传递的参数时正常</span></td> 
   <td><span style="color:#FF0000">接收$_POST传递的参数时正常</span></td> 
   <td><span style="color:#FF0000">推荐采用方式</span></td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>GBK</td> 
   <td>GBK</td> 
   <td>正常</td> 
   <td>接收$_GET传递的参数时出现乱码</td> 
   <td>客户端url=encodeURI(url)<br> 服务器端<br> $str=iconv("UTF-8","GBK",$str)</td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>GBK</td> 
   <td>GBK</td> 
   <td>接收$_POST传递的参数时出现乱码</td> 
   <td>接收$_POST传递的参数时出现乱码</td> 
   <td>服务器端<br> $str=iconv("UTF-8","GBK",$str)</td> 
  </tr> 
 </tbody> 
</table>

以下为测试的代码：

客户端index.[PHP][]

**\[php\]** [ view plain][view plain] [ copy][view plain]

1.  <?php  
2.      header("Content-type:text/html;charset=UTF-8");  
3.  ?>  
4.  <input type="button" value=" Load " id="button1">  
5.  <div id="div1">Loading</div>  
6.  <script type="text/javascript">  
7.      window.οnlοad=function() \{  
8.          document.getElementById("button1").οnclick=function() \{  
9.              var xmlHttp;  
10.             var url="t.php?id='测试'&nu="\+Math.random();  
11.             url=encodeURI(url);              //这里是重点  
12.             if(window.XMLHttpRequest) \{  
13.                 xmlHttp=new XMLHttpRequest();  
14.             \}  
15.             else \{  
16.                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
17.             \}  
18.             xmlHttp.onreadystatechange=function() \{  
19.                 if(xmlHttp.readyState==4&&xmlHttp.status==200) \{  
20.                     document.getElementById("div1").innerHTML=xmlHttp.responseText;  
21.                 \}  
22.             \}  
23.             xmlHttp.open("GET",url,true);  
24.             xmlHttp.send();  
25.             //xmlHttp.open("POST","t.php",true);  
26.             //xmlHttp.open("POST",url,true);  
27.             //xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
28.             //xmlHttp.send("id='测试'&nu="+Math.random());  
29.             //xmlHttp.send();  
30.         \}  
31.     \}  
32. </script>

服务器端t.php

**\[php\]** [ view plain][view plain] [ copy][view plain]

1.  <?php  
2.      header("Content-type:text/html;charset=UTF-8");  
3.      //echo "这是测试中文"; //如果是直接这样向客户端输出中文，不通过$\_GET或者$\_POST传递的参数  
4.      //则只需客户端和服务器端编码一致，无论是UTF-8还是GBK，都不会出现乱码  
5.      echo $\_GET\['id'\].$\_GET\['nu'\];  
6.      //echo iconv("UTF-8","GBK",$\_GET\['id'\].$\_GET\['nu'\]);  
7.      //echo $\_POST\['id'\].$\_POST\['nu'\];  
8.      //echo iconv("UTF-8","GBK",$\_POST\['id'\].$\_POST\['nu'\]);  
9.  ?>

另在IE中可能存在这样一个问题：

由于出现错误c00ce56e而导致此项操作无法完成

此时设置编码时将header('Content-Type:text/html;charset=utf8')改为header('Content-Type:text/html;charset=utf-8')即可。

[Ajax_-_IE_FF]: http://blog.csdn.net/fanteathy/article/details/7362105
[JavaScript]: http://lib.csdn.net/base/javascript
[Link 1]: http://lib.csdn.net/base/softwaretest
[PHP]: http://lib.csdn.net/base/php
[view plain]: http://blog.csdn.net/fanteathy/article/details/7362105#