以前在新浪博客寫過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; 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")——將頁面傳來的數據進行格式轉換並提取 2.response.setContentType("text/html;charset=utf-8")——將響應返回值進行utf-8編碼後返回頁面 3.特別注意2中的轉換需寫在本方法內一切的response之前,否則可能失效 4.本servlet對數據的格式編碼只適合Post方法,若提交方式為GET則提取頁面數據的代碼如下: 復制代碼 代碼如下: 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方法傳遞數據,注意data的設置。將返回數據填入span標簽。 如果使用GET方法傳遞頁面數據,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兩步,問題出現。 7.修改jQuery-1.x.x.js文件,將 contentType:"application/x-www-form-urlencoded"改為下面的代碼 contentType:"application/x-www-form-urlencoded;charset=UTF-8"