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"