jQuery調(diào)用AJAX時(shí)Get和post公用的亂碼解決方法實(shí)例說(shuō)明
更新時(shí)間：2013年06月04日 16:31:42 作者：
js調(diào)用AJAX時(shí)Get和post的亂碼解決辦法以前有寫過(guò)的但是使用js代碼比較繁瑣，下面與大家分享下使用jQuery該怎么解決，遇到類似情況的朋友可以參考下哈
以前在新浪博客寫過(guò)js調(diào)用AJAX時(shí)Get和post的亂碼解決辦法，但是使用js代碼比較繁瑣，我們?cè)谑褂胊jax進(jìn)行數(shù)據(jù)交互時(shí)可以使用js的一個(gè)成熟框架---jQuery。
一個(gè)網(wǎng)站的設(shè)計(jì)，不管是注冊(cè)登錄還是分頁(yè)查找，都需要提交參數(shù)到服務(wù)器以便得到所需的頁(yè)面數(shù)據(jù)。為了減少用戶因刷新頁(yè)面帶來(lái)的煎熬，ajax誕生。但是初學(xué)者進(jìn)行項(xiàng)目開發(fā)時(shí)，會(huì)遇到一個(gè)很煩人的問(wèn)題：中文亂碼。
下面我就通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)告訴大家哪些地方可能會(huì)導(dǎo)致亂碼，我們需要通過(guò)什么方式來(lái)解決。
我們這個(gè)實(shí)例主要實(shí)現(xiàn)用戶注冊(cè)時(shí)用戶名是否正確（已存在），在焦點(diǎn)移開username文本text時(shí)，對(duì)username進(jìn)行異步提交并由servlet進(jìn)行提取判斷，并將結(jié)果返回頁(yè)面做出相應(yīng)提示。
第一步，新建一個(gè)web工程（默認(rèn)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("錯(cuò)誤");
}else{
pw.println("正確");
}
}
}
從可從代碼看出，含有編碼格式的語(yǔ)句便是解決亂碼的辦法之一。
在代碼中注意：
1.URLDecoder.decode(request.getParameter("userName"),"utf-8")——將頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)進(jìn)行格式轉(zhuǎn)換并提取
2.response.setContentType("text/html;charset=utf-8")——將響應(yīng)返回值進(jìn)行utf-8編碼后返回頁(yè)面
3.特別注意2中的轉(zhuǎn)換需寫在本方法內(nèi)一切的response之前，否則可能失效
4.本servlet對(duì)數(shù)據(jù)的格式編碼只適合Post方法，若提交方式為GET則提取頁(yè)面數(shù)據(jù)的代碼如下：
request.setCharacterEncoding("utf-8");
StringuserName = request.getParameter("userName");
userName= new String(userName.getBytes("iso-8859-1"),"utf-8");
第三步，編寫簡(jiǎn)單注冊(cè)頁(yè)面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.頁(yè)面要設(shè)置為utf-8，且引入jquery-1.4.4.js
2.ajax通過(guò)POST方法傳遞數(shù)據(jù)，注意data的設(shè)置。將返回?cái)?shù)據(jù)填入span標(biāo)簽。
如果使用GET方法傳遞頁(yè)面數(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>
經(jīng)過(guò)以上代碼的編寫，本注冊(cè)驗(yàn)證的項(xiàng)目已完成，將其部署至tomcat并通過(guò)網(wǎng)頁(yè)訪問(wèn)。
最后總結(jié)大神的jQuery亂碼問(wèn)題解決方法：
1. 檢查頁(yè)面編碼，將頁(yè)面編碼設(shè)置為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. 在工程中新增過(guò)濾器，將編碼方式設(shè)置為utf8
經(jīng)過(guò)以上四步操作后，問(wèn)題依舊。
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"
對(duì)比5,6兩步，問(wèn)題出現(xiàn)。
7.修改jQuery-1.x.x.js文件，將
contentType:"application/x-www-form-urlencoded"改為下面的代碼
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
一個(gè)網(wǎng)站的設(shè)計(jì)，不管是注冊(cè)登錄還是分頁(yè)查找，都需要提交參數(shù)到服務(wù)器以便得到所需的頁(yè)面數(shù)據(jù)。為了減少用戶因刷新頁(yè)面帶來(lái)的煎熬，ajax誕生。但是初學(xué)者進(jìn)行項(xiàng)目開發(fā)時(shí)，會(huì)遇到一個(gè)很煩人的問(wèn)題：中文亂碼。
下面我就通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)告訴大家哪些地方可能會(huì)導(dǎo)致亂碼，我們需要通過(guò)什么方式來(lái)解決。
我們這個(gè)實(shí)例主要實(shí)現(xiàn)用戶注冊(cè)時(shí)用戶名是否正確（已存在），在焦點(diǎn)移開username文本text時(shí)，對(duì)username進(jìn)行異步提交并由servlet進(jìn)行提取判斷，并將結(jié)果返回頁(yè)面做出相應(yīng)提示。
第一步，新建一個(gè)web工程（默認(rèn)GBK格式），取名jQuery_Ajax。在其WebRoot目錄下新建js文件包，將jquery-1.4.4.js放于其中。
第二步，在src下創(chuàng)建servlet包，并編寫Vali.java
復(fù)制代碼 代碼如下:
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("錯(cuò)誤");
}else{
pw.println("正確");
}
}
}
從可從代碼看出，含有編碼格式的語(yǔ)句便是解決亂碼的辦法之一。
在代碼中注意：
1.URLDecoder.decode(request.getParameter("userName"),"utf-8")——將頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)進(jìn)行格式轉(zhuǎn)換并提取
2.response.setContentType("text/html;charset=utf-8")——將響應(yīng)返回值進(jìn)行utf-8編碼后返回頁(yè)面
3.特別注意2中的轉(zhuǎn)換需寫在本方法內(nèi)一切的response之前，否則可能失效
4.本servlet對(duì)數(shù)據(jù)的格式編碼只適合Post方法，若提交方式為GET則提取頁(yè)面數(shù)據(jù)的代碼如下：
復(fù)制代碼 代碼如下:
request.setCharacterEncoding("utf-8");
StringuserName = request.getParameter("userName");
userName= new String(userName.getBytes("iso-8859-1"),"utf-8");
第三步，編寫簡(jiǎn)單注冊(cè)頁(yè)面ajax.jsp
復(fù)制代碼 代碼如下:
<%@ 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.頁(yè)面要設(shè)置為utf-8，且引入jquery-1.4.4.js
2.ajax通過(guò)POST方法傳遞數(shù)據(jù)，注意data的設(shè)置。將返回?cái)?shù)據(jù)填入span標(biāo)簽。
如果使用GET方法傳遞頁(yè)面數(shù)據(jù)，js代碼如下：
復(fù)制代碼 代碼如下:
function vali(){
$.ajax({
type:"GET",
url:"/jQuery_Ajax/Vali",
data:encodeURI("userName="+$(":text").val()),
success:function(data){
$("span").text(data);
}
});
}
最后一步，在web.xml配置servlet和映射
復(fù)制代碼 代碼如下:
<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>
經(jīng)過(guò)以上代碼的編寫，本注冊(cè)驗(yàn)證的項(xiàng)目已完成，將其部署至tomcat并通過(guò)網(wǎng)頁(yè)訪問(wèn)。
最后總結(jié)大神的jQuery亂碼問(wèn)題解決方法：
1. 檢查頁(yè)面編碼，將頁(yè)面編碼設(shè)置為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. 在工程中新增過(guò)濾器，將編碼方式設(shè)置為utf8
經(jīng)過(guò)以上四步操作后，問(wèn)題依舊。
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"
對(duì)比5,6兩步，問(wèn)題出現(xiàn)。
7.修改jQuery-1.x.x.js文件，將
contentType:"application/x-www-form-urlencoded"改為下面的代碼
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
您可能感興趣的文章:
- Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請(qǐng)求，調(diào)用方法返回?cái)?shù)據(jù)
- jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實(shí)例代碼
- jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法分享
- 前臺(tái)JS(jquery ajax)調(diào)用后臺(tái)方法實(shí)現(xiàn)無(wú)刷新級(jí)聯(lián)菜單示例
- 使用jquery 的ajax調(diào)用總是錯(cuò)誤親測(cè)的解決方法
- jquery利用ajax調(diào)用后臺(tái)方法實(shí)例
- 淺析jquery ajax異步調(diào)用方法中不能給全局變量賦值的原因及解決方法
- jquery.Ajax()方法調(diào)用Asp.Net后臺(tái)的方法解析
- jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
- jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊文字可編輯并修改保存至數(shù)據(jù)庫(kù)
網(wǎng)上的方法只有點(diǎn)擊文字編輯并保持，但是沒(méi)有完整的代碼寫怎么保存到數(shù)據(jù)庫(kù)，本例用一條sql語(yǔ)句保存到數(shù)據(jù)庫(kù)2014-04-04
這篇文章主要是對(duì)jquery ajax 局部刷新的小案例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
jQuery對(duì)val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對(duì)瀏覽器的區(qū)別，有默認(rèn)值的情況下，如果用val()賦值了，那么當(dāng)修改這個(gè)值得時(shí)候，google不能獲取最新的值，但是ie可以2014-09-09
jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下2014-03-03
解決jQuery ajax請(qǐng)求在IE6中莫名中斷的問(wèn)題
本文主要介紹jQuery ajax請(qǐng)求在IE6中莫名中斷問(wèn)題的解決方法，有需要的朋友可以參考一下。2016-06-06
下面小編就為大家?guī)?lái)一篇淺談jquery的map()和each()方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法分析
這篇文章主要介紹了javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法,結(jié)合具體實(shí)例形式分析了JavaScript與jQuery針對(duì)點(diǎn)擊按鈕觸發(fā)事件的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2019-11-11
標(biāo)簽云想必大家都有見(jiàn)到過(guò)吧，那么3D標(biāo)簽云，有沒(méi)有接觸過(guò)呢？本例為大家介紹下通過(guò)jquery 實(shí)現(xiàn)的3D標(biāo)簽云，感興趣的朋友可以參考下2014-06-06
ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例
這篇文章主要介紹了ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01