jQuery調用AJAX時Get和post公用的亂碼解決方法實例說明

更新時間：2013年06月04日 16:31:42 作者：

js調用AJAX時Get和post的亂碼解決辦法以前有寫過的但是使用js代碼比較繁瑣，下面與大家分享下使用jQuery該怎么解決，遇到類似情況的朋友可以參考下哈

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

一個網站的設計，不管是注冊登錄還是分頁查找，都需要提交參數(shù)到服務器以便得到所需的頁面數(shù)據(jù)。為了減少用戶因刷新頁面帶來的煎熬，ajax誕生。但是初學者進行項目開發(fā)時，會遇到一個很煩人的問題：中文亂碼。

下面我就通過一個簡單的實例來告訴大家哪些地方可能會導致亂碼，我們需要通過什么方式來解決。
我們這個實例主要實現(xiàn)用戶注冊時用戶名是否正確（已存在），在焦點移開username文本text時，對username進行異步提交并由servlet進行提取判斷，并將結果返回頁面做出相應提示。

第一步，新建一個web工程（默認GBK格式），取名jQuery_Ajax。在其WebRoot目錄下新建js文件包，將jquery-1.4.4.js放于其中。

第二步，在src下創(chuàng)建servlet包，并編寫Vali.java

復制代碼代碼如下:

 
package servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.net.URLDecoder; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
public class Vali extends HttpServlet { 
@Override 
protectedvoid service(HttpServletRequest request, HttpServletResponse response) 
throwsServletException, IOException { 
StringuserName = URLDecoder.decode(request.getParameter("userName"),"utf-8"); 
System.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")——將頁面?zhèn)鱽淼臄?shù)據(jù)進行格式轉換并提取
2.response.setContentType("text/html;charset=utf-8")——將響應返回值進行utf-8編碼后返回頁面
3.特別注意2中的轉換需寫在本方法內一切的response之前，否則可能失效
4.本servlet對數(shù)據(jù)的格式編碼只適合Post方法，若提交方式為GET則提取頁面數(shù)據(jù)的代碼如下：

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
<%@ page language="java"import="java.util.*" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'ajax.jsp' starting page</title> 
<metahttp-equiv="pragma" content="no-cache"> 
<metahttp-equiv="cache-control" content="no-cache"> 
<metahttp-equiv="expires" content="0"> 
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> 
<metahttp-equiv="description" content="This is my page"> 
<!-- 
<linkrel="stylesheet" type="text/css"href="styles.css"> 
--> 
<scripttype="text/javascript"src="js/jquery-1.4.4.js"></script> 
<scripttype="text/javascript"> 
function vali(){ 
$.ajax({ 
type:"POST", 
url:"/jQuery_Ajax/Vali", 
data:encodeURI(encodeURI("userName="+$(":text").val())), 
success:function(data){ 
$("span").text(data); 
} 
}); 
} 
</script> 
</head> 
<body> 
用戶名:<inputtype="text" name="userName"onblur="vali();"/><span></span><br/> 
密碼:<inputtype="password" name="password" /> 
</body> 
</html> 

在代碼中注意：
1.頁面要設置為utf-8，且引入jquery-1.4.4.js
2.ajax通過POST方法傳遞數(shù)據(jù)，注意data的設置。將返回數(shù)據(jù)填入span標簽。

如果使用GET方法傳遞頁面數(shù)據(jù)，js代碼如下：

復制代碼代碼如下:

 
function vali(){ 
$.ajax({ 
type:"GET", 
url:"/jQuery_Ajax/Vali", 
data:encodeURI("userName="+$(":text").val()), 
success:function(data){ 
$("span").text(data); 
} 
}); 
} 

最后一步，在web.xml配置servlet和映射

復制代碼代碼如下:

 
<servlet> 
<description>This is the description of my J2EEcomponent</description> 
<display-name>This is the display name of my J2EEcomponent</display-name> 
<servlet-name>Vali</servlet-name> 
<servlet-class>servlet.Vali</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>Vali</servlet-name> 
<url-pattern>/Vali</url-pattern> 
</servlet-mapping> 

經過以上代碼的編寫，本注冊驗證的項目已完成，將其部署至tomcat并通過網頁訪問。

最后總結大神的jQuery亂碼問題解決方法：
1. 檢查頁面編碼，將頁面編碼設置為utf8，如下：
<metahttp-equiv="content-type" content="text/html;charset=utf-8">
2. 檢查servlet，在doPost或doGet方法中添加如下代碼：
response.setContentType("text/xml;charset=utf-8");
3. 修改tomcat文件，在TOMCAT_HOME/conf/server.xml文件中增加URIEncoding=”utf8”:
<Connector port="8080"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"URIEncoding="utf-8"/>
4. 在工程中新增過濾器，將編碼方式設置為utf8
經過以上四步操作后，問題依舊。
5. 檢查ie的http header，查看contentType字段，如下：
contentType:"application/x-www-form-urlencoded"
6．檢查firefox的http header，查看contentType字段，如下：
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
對比5,6兩步，問題出現(xiàn)。
7.修改jQuery-1.x.x.js文件，將
contentType:"application/x-www-form-urlencoded"改為下面的代碼
contentType:"application/x-www-form-urlencoded;charset=UTF-8"

您可能感興趣的文章: