解決ajax提交表單時中文亂碼的問題

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

Ajax表單提交資料出現亂碼和解決辦法

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

//GET方式提交
doRequestUsingGET() {
createXMLHttpRequest();
var url = "GetAndPostExample?" + queryString + "&timeStamp="
+ new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
//POST方式提交
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}

當在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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More