jQuery调用AJAX时Get和post公用的乱码解决方法

最新推荐文章于 2021-08-05 22:55:33 发布

齐岳

最新推荐文章于 2021-08-05 22:55:33 发布

阅读量6.9k

点赞数 2

分类专栏： web其他

本文链接：https://blog.csdn.net/qiyuexuelang/article/details/9015843

版权

web其他专栏收录该内容

37 篇文章 1 订阅

订阅专栏

以前在新浪博客写过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"οnblur="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”:

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"

齐岳

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery调用AJAX时Get和post公用的乱码解决方法

以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法，但是使用js代码比较繁琐，我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery。一个网站的设计，不管是注册登录还是分页查找，都需要提交参数到服务器以便得到所需的页面数据。为了减少用户因刷新页面带来的煎熬，ajax诞生。但是初学者进行项目开发时，会遇到一个很烦人的问题：中文乱码。
复制链接

扫一扫