DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery調用AJAX時Get和post公用的亂碼
jQuery調用AJAX時Get和post公用的亂碼
編輯:JavaScript綜合知識     

 以前在新浪博客寫過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"   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved