熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

jQuery調用AJAX時Get和post公用的亂碼

2013-11-23 18:16:46  來源: Javascript 

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

  一個網站的設計不管是注冊登錄還是分頁查找都需要提交參數到服務器以便得到所需的頁面數據為了減少用戶因刷新頁面帶來的煎熬ajax誕生但是初學者進行項目開發時會遇到一個很煩人的問題中文亂碼   下面我就通過一個簡單的實例來告訴大家哪些地方可能會導致亂碼我們需要通過什麼方式來解決  我們這個實例主要實現用戶注冊時用戶名是否正確(已存在)在焦點移開username文本text時對username進行異步提交並由servlet進行提取判斷並將結果返回頁面做出相應提示   第一步新建一個web工程(默認GBK格式)取名jQuery_Ajax在其WebRoot目錄下新建js文件包將jqueryjs放於其中    第二步在src下創建servlet包並編寫Valijava   代碼如下: package servlet;  import javaioIOException;  import javaioPrintWriter;  import javanetURLDecoder;  import javaxservletServletException;  import javaxservlet importjavaxservlet importjavaxservlet public class Vali extends HttpServlet {  @Override  protectedvoid service(HttpServletRequest request HttpServletResponse response)  throwsServletException IOException {  StringuserName = URLDecoderdecode(requestgetParameter("userName")"utf");  Systemoutprintln(userName);  responsesetContentType("text/html;charset=utf");  PrintWriter pw =responsegetWriter();  if(userNameequals("張三")){  pwprintln("錯誤");  }else{  pwprintln("正確");  }  }  }    從可從代碼看出含有編碼格式的語句便是解決亂碼的辦法之一  在代碼中注意 URLDecoderdecode(requestgetParameter("userName")"utf")——將頁面傳來的數據進行格式轉換並提取  responsesetContentType("text/html;charset=utf")——將響應返回值進行utf編碼後返回頁面  特別注意中的轉換需寫在本方法內一切的response之前否則可能失效  本servlet對數據的格式編碼只適合Post方法若提交方式為GET則提取頁面數據的代碼如下  復制代碼 代碼如下: requestsetCharacterEncoding("utf");  StringuserName = requestgetParameter("userName");  userName= new String(userNamegetBytes("iso")"utf");    第三步編寫簡單注冊頁面ajaxjsp  代碼如下: <%@ page language="java"import="javautil*" pageEncoding="utf"%>  <%  String path = requestgetContextPath();  String basePath =requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";  %>  <!DOCTYPE HTML PUBLIC "//WC//DTDHTML Transitional//EN">  <html>  <head>  <base href="<%=basePath%>">  <title>My JSP ajaxjsp starting page</title>  <metahttpequiv="pragma" content="nocache">  <metahttpequiv="cachecontrol" content="nocache">  <metahttpequiv="expires" content="">  <metahttpequiv="keywords"content="keywordkeywordkeyword">  <metahttpequiv="description" content="This is my page">  <!  <linkrel="stylesheet" type="text/css"href="stylescss">  >  <scripttype="text/javascript"src="js/jqueryjs"></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且引入jqueryjs  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);  }  });  }    最後一步在webxml配置servlet和映射  代碼如下: <servlet>  <description>This is the description of my JEEcomponent</description>  <displayname>This is the display name of my JEEcomponent</displayname>  <servletname>Vali</servletname>  <servletclass>servletVali</servletclass>  </servlet>  <servletmapping>  <servletname>Vali</servletname>  <urlpattern>/Vali</urlpattern>  </servletmapping>    經過以上代碼的編寫本注冊驗證的項目已完成將其部署至tomcat並通過網頁訪問   最後總結大神的jQuery亂碼問題解決方法  檢查頁面編碼將頁面編碼設置為utf如下  <metahttpequiv="contenttype" content="text/html;charset=utf">  檢查servlet在doPost或doGet方法中添加如下代碼  responsesetContentType("text/xml;charset=utf");  修改tomcat文件在TOMCAT_HOME/conf/serverxml文件中增加URIEncoding=”utf”:  <Connector port=""protocol="HTTP/" connectionTimeout="" redirectPort=""URIEncoding="utf"/>  在工程中新增過濾器將編碼方式設置為utf  經過以上四步操作後問題依舊  檢查ie的http header查看contentType字段如下  contentType:"application/xwwwformurlencoded"  .檢查firefox的http header查看contentType字段如下  contentType:"application/xwwwformurlencoded;charset=UTF"  對比兩步問題出現  修改jQueryxxjs文件將  contentType:"application/xwwwformurlencoded"改為下面的代碼  contentType:"application/xwwwformurlencoded;charset=UTF"   
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25494.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.