以前在新浪博客寫過js調用AJAX時Get和post的亂碼解決辦法但是使用js代碼比較繁瑣我們在使用ajax進行數據交互時可以使用js的一個成熟框架jQuery
一個網站的設計
不管是注冊登錄還是分頁查找
都需要提交參數到服務器以便得到所需的頁面數據
為了減少用戶因刷新頁面帶來的煎熬
ajax誕生
但是初學者進行項目開發時
會遇到一個很煩人的問題
中文亂碼
下面我就通過一個簡單的實例來告訴大家哪些地方可能會導致亂碼
我們需要通過什麼方式來解決
我們這個實例主要實現用戶注冊時用戶名是否正確（已存在）
在焦點移開username文本text時
對username進行異步提交並由servlet進行提取判斷
並將結果返回頁面做出相應提示
第一步
新建一個web工程（默認GBK格式）
取名jQuery_Ajax
在其WebRoot目錄下新建js文件包
將jquery
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
importjavax
servlet
importjavax
servlet
public class Vali extends HttpServlet {
@Override
protectedvoid service(HttpServletRequest request
HttpServletResponse response)
throwsServletException
IOException {
StringuserName = URLDecoder
decode(request
getParameter("userName")
"utf
");
System
out
println(userName);
response
setContentType("text/html;charset=utf
");
PrintWriter pw =response
getWriter();
if(userName
equals("張三")){
pw
println("錯誤");
}else{
pw
println("正確");
}
}
}
從可從代碼看出
含有編碼格式的語句便是解決亂碼的辦法之一
在代碼中注意
URLDecoder
decode(request
getParameter("userName")
"utf
")——將頁面傳來的數據進行格式轉換並提取
response
setContentType("text/html;charset=utf
")——將響應返回值進行utf
編碼後返回頁面
特別注意
中的轉換需寫在本方法內一切的response之前
否則可能失效
本servlet對數據的格式編碼只適合Post方法
若提交方式為GET則提取頁面數據的代碼如下
復制代碼 代碼如下:
request
setCharacterEncoding("utf
");
StringuserName = request
getParameter("userName");
userName= new String(userName
getBytes("iso
")
"utf
");
第三步
編寫簡單注冊頁面ajax
jsp
代碼如下:
<%@ page language="java"import="java
util
*" pageEncoding="utf
"%>
<%
String path = request
getContextPath();
String basePath =request
getScheme()+"://"+request
getServerName()+":"+request
getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "
//W
C//DTDHTML
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="
">
<metahttp
equiv="keywords"content="keyword
keyword
keyword
">
<metahttp
equiv="description" content="This is my page">
<!
<linkrel="stylesheet" type="text/css"href="styles
css">
>
<scripttype="text/javascript"src="js/jquery
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>
在代碼中注意
頁面要設置為utf
且引入jquery
js
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 J
EEcomponent</description>
<display
name>This is the display name of my J
EEcomponent</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亂碼問題解決方法
檢查頁面編碼
將頁面編碼設置為utf
如下
<metahttp
equiv="content
type" content="text/html;charset=utf
">
檢查servlet
在doPost或doGet方法中添加如下代碼
response
setContentType("text/xml;charset=utf
");
修改tomcat文件
在TOMCAT_HOME/conf/server
xml文件中增加URIEncoding=”utf
”:
<Connector port="
"protocol="HTTP/
" connectionTimeout="
" redirectPort="
"URIEncoding="utf
"/>
在工程中新增過濾器
將編碼方式設置為utf
經過以上四步操作後
問題依舊
檢查ie的http header
查看contentType字段
如下
contentType:"application/x
www
form
urlencoded"
．檢查firefox的http header
查看contentType字段
如下
contentType:"application/x
www
form
urlencoded;charset=UTF
"
對比
兩步
問題出現
修改jQuery
x
x
js文件
將
contentType:"application/x
www
form
urlencoded"改為下面的代碼
contentType:"application/x
www
form
urlencoded;charset=UTF
"
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25494.html
