jQuery呼叫AJAX時Get與post公用的亂碼解決方法實例說明_jquery

以前在新浪博客寫過js調用AJAX時Get和post的亂碼解決辦法，但是使用js代碼比較繁瑣，我們在使用ajax進行數據交互時可以使用js的一個成熟框架---jQuery 。

一個網站的設計，不管是註冊登入還是分頁查找，都需要提交參數到伺服器以便得到所需的頁面資料。為了減少使用者因刷新頁面帶來的煎熬，ajax誕生。但是初學者進行專案開發時，會遇到一個很煩人的問題：中文亂碼。

下面我就透過一個簡單的實例來告訴大家哪些地方可能會導致亂碼，我們需要透過什麼方式來解決。
我們這個實例主要實現使用者註冊時使用者名稱是否正確（已存在），在焦點移開username文字text時，對username進行非同步提交並由servlet進行提取判斷，並將結果傳回頁面做出相應提示。

第一步，新建一個web工程（預設GBK格式），取名為jQuery_Ajax。在其WebRoot目錄下新建js檔案包，將jquery-1.4.4.js放其中。

第二步，在src下建立servlet包，並寫Vali.java

複製程式碼 程式碼如下:

package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
let java. .ServletException;
import javax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpServletResponse; Override
protectedvoid service(HttpServletRequest request, HttpServletResponse response)
throwsServletException, IOException {
StringuserName = URLDecoder.decode(request.getParameter"
StringuserName = URLDecoder.decode(request.getParameter(" out.println(userName);
response.setContentType("text/html;charset=utf-8");
PrintWriter pw =response.getWriter();
if(userName.equals("張三")){
pw.println("錯誤");
}else{
pw.println("正確");
}
}
}

從可從代碼看出，含有編碼格式的語句便是解決亂碼的辦法之一。

在程式碼中註意：1.URLDecoder.decode(request.getParameter("userName"),"utf-8")－將頁面傳來的資料進行格式轉換並提取
2.response.setContentType("text/html;charset=utf-8")－將回應回傳值進行utf-8編碼後回傳頁
3.特別注意2中的轉換需寫在在本方法內一切的response之前，否則可能失效
4.本servlet對資料的格式編碼只適合Post方法，若提交方式為GET則提取頁面資料的代碼如下：

複製程式碼 程式碼如下:

request.setCharacterEncoding("utf-8");
userName = request.getParameter(" userName");
userName= new String(userName.getBytes("iso-8859-1"),"utf-8");

第三步，寫簡單註冊頁面ajax .jsp

複製程式碼 程式碼如下:

字串路徑 = request.getContextPath() ;
String basePath =request.getScheme() "://" request.getServerName() ":" request.getServerPort() 路徑 "/";
%>
">




;




function vali(){
$.ajax({
type:"POST",
url:"/jQuery_Ajax/Vali",
data:encodeURI(encodeURI("userName=" $ (":text").val())),
success:function(data){
$("span").text(data)
}
});
}
腳本>
頭>

使用者名稱：
>
密碼：
身體>