DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 解決ajax提交表單時中文亂碼的問題
解決ajax提交表單時中文亂碼的問題
編輯:AJAX詳解     

網上搜索結合自己開發過程中遇到的情況,整理一下,以備忘:

AJax表單提交數據出現亂碼和解決辦法

   //要傳遞的參數
   var queryString = "firstName=" + firstName + "&lastName=" + lastName
                          + "&birthday=" + birthday;    function  

  1. //GET方式提交   
  2. doRequestUsingGET() {   
  3.          createXMLHttpRequest();   
  4.         var url = "GetAndPostExample?" + queryString + "&timeStamp="  
  5.                            + new Date().getTime();   
  6.          XMLHttp.onreadystatechange = handleStateChange;   
  7.          XMLHttp.open("GET", url, true);   
  8.          XMLHttp.send(null);   
  9. }   
  10.   
  11. //POST方式提交   
  12. function doRequestUsingPOST() {   
  13.          createXMLHttpRequest();   
  14.         var url = "GetAndPostExample?timeStamp=" + new Date().getTime();   
  15.          XMLHttp.open("POST", url, true);   
  16.          XMLHttp.onreadystatechange = handleStateChange;   
  17.          XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
  18.          XMLHttp.send(queryString);   
  19. }  
當在servlet接收參數時,必須要這樣: //當用POST方法時,一定要設置成utf-8,否則亂碼
String firstName = new String(request.getParameter("firstName").getBytes("ISO-8859-1"), "utf-8");
//當用GET方法時,要設置成GB2312,否則亂碼
String lastName = new String(request.getParameter("lastName").getBytes("ISO-8859-1"), "GB2312");

在另一網友秋憶博客,找到了另一種方法,以下是原文的內容:

前段時間寫JSP,使用AJax以POST方式提交數據,如果是中文字符提交就會亂碼,後來寫ASP時用到AJax以POST方式提交數據,中文一樣是亂碼。搜索一下相關資料,問題應該是提交數據時是以UTF-8編碼提交,所以接收時如果使用GB2312或者其它中文編碼的話就會亂碼。

使用GET方式提交數據的時候,中文問題很好解決,setRequestHeader("Content-Type","text/Html; encoding=gb18030")就可以了。但這個方法在POST方式中卻不起作用。大家都知道GET方式提交數據有長度限制,有時我們必須使用 POST方式來提交數據。

對於使用POST,JSP的解決方法如下
使用escape(或encodeURI,兩個函數都是JavaScript的函數,功能基本相同,可以查一下相關的幫助),但要使用兩次,這個是關鍵。

初始頁面內容如下(hello.JSP):
<%@ page language="java" import="Java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<Html>
<head>
<title>AJax提交頁面</title>
<meta http-equiv="Content-Type" content="text/Html; charset=GB18030">
<script type="text/Javascript">
function justdo(){
    var post = "name=王力猛&email=wallimn@sohu.com&bokee=http://wallimn.bokee.com";
    post = encodeURI(post);
    post = encodeURI(post);    //兩次,很關鍵
    var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
    var URL = "act.JSP";    //文件名需要調整成測試時的相應位置
    XMLObj.open("POST",URL,true);
    XMLObj.setRequestHeader("Cache-Control","no-cache");
    XMLObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    XMLObj.send(post);    //注意:POST方式,使用這個來發送內容
}
</script>
</head>
<body>
<input type="button" value="提交" />
</body>
</Html>



AJax請求處理頁面(act.JSP)的內容如下:
<%@ page language="java" import="Java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<%@page import="Java.Net.URLDecoder"%>
<Html>
<head>
<title>AJax deal</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<%
//遍歷輸出參數內容。
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
    String h = (String)e.nextElement();
    String v = request.getParameter(h);
    String mm = Java.Net.URLDecoder.decode(v, "UTF-8");
    System.out.println("請求參數: " + h + " = " + mm);
}
%>
</body>
</Html>


分析:當調用request.getParameter()函數時,會自動進行一次URI的解碼過程,調用時內置的解碼過程會導致亂碼出現。而URI編碼兩次後,request.getParameter()函數得到的是原信息URI編碼一次的內容。再用可控的解碼函數 Java.Net.URLDecoder.decode()就可解出原始的正確的信息。


對於ASP,可以在客戶端使用Javascript的encodeURIComponent函數(其它編碼函數可能也行,沒有試)編碼兩次,然後ASP使用Request.Form接收後使用JavaScript的decodeURIComponent解碼一次:

初始頁面內容如下(hello.ASP):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<Html>
<head>
<title>AJax提交頁面</title>
<meta http-equiv="Content-Type" content="text/Html; charset=GB2312">
<script type="text/Javascript">
function justdo(){
    var post = "name=" +
encodeURIComponent(encodeURIComponent("王力猛"));    //兩次
    var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
    var URL = "act.ASP";    //文件名需要調整成測試時的相應位置
    XMLObj.open("POST",URL,true);
    XMLObj.setRequestHeader("Cache-Control","no-cache");
    XMLObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    XMLObj.send(post);    //注意:POST方式,使用這個來發送內容
}
</script>
</head>
<body>
<input type="button" value="提交" />
</body>
</Html>


AJax請求處理頁面(act.ASP)的內容如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<Html>
<head>
<title>AJax deal</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<%
Dim context
context = decodeText(Request.Form("name"))
Response.Write("name=" & context)
%>
</body>
</Html>

<script language="Javascript" runat="server">
function decodeText(str){
    return (str == null ? "" : decodeURIComponent(str));
}
</script>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved