萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery調用AJAX時Get和post公用的亂碼
jQuery調用AJAX時Get和post公用的亂碼
以前在新浪博客寫過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"- 上一頁:左側是表頭的JS表格控件
- 下一頁:js調用AJAX時Get和post的亂碼
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved