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" 
 

时间: 2016-06-04

jQuery调用AJAX时Get和post公用的乱码的相关文章

jQuery调用AJAX时Get和post公用的乱码解决方法实例说明_jquery

以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法,但是使用js代码比较繁琐,我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery. 一个网站的设计,不管是注册登录还是分页查找,都需要提交参数到服务器以便得到所需的页面数据.为了减少用户因刷新页面带来的煎熬,ajax诞生.但是初学者进行项目开发时,会遇到一个很烦人的问题:中文乱码. 下面我就通过一个简单的实例来告诉大家哪些地方可能会导致乱码,我们需要通过什么方式来解决. 我们这个实例主要实现用户注册时用户名

jQuery调用ajax请求的常见方法汇总

 这篇文章主要介绍了jQuery调用ajax请求的常见方法,实例汇总了三种常见的jQuery调用Ajax的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例汇总了jQuery调用ajax请求的常见方法.分享给大家供大家参考.具体如下: 示例代码1 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $.ajax('/ROUTE', { type: 'GET' data: {param1: 'Hello', param2: 'Worl

jQuery调用ajax请求的常见方法汇总_jquery

本文实例汇总了jQuery调用ajax请求的常见方法.分享给大家供大家参考.具体如下: 示例代码1 $.ajax('/ROUTE', { type: 'GET' data: {param1: 'Hello', param2: 'World'}, dataType: 'json', contentType: 'application/json', timeout: 3000, success: function(response) { // console.log(response.somethi

JQuery的Ajax中Post方法传递中文出现乱码的解决方法_jquery

本文实例讲述了JQuery中Post传递中文出现的解决方法,即乱码ajax与jquery.ajax中文参数post传递乱码处理方法.分享给大家供大家参考.具体分析如下: 问题一: 今天在做项目时,需要用到Ajax,之前我在用GET方式传递中文参数时,只需要在后台程序中设置页面编码为GB2312即中文能正常显示,可是这次由于表单项目较多,不适合用GET方式传递,只能用POST方式,但发现后台程序中设置编码为GB2312时中文还是显示的乱码.经过一番研究问题才最终得到解决. 解决方法: 解决此问题的

js调用AJAX时Get和post的乱码

 在使用"get"时,抓取的页面最后加上编码类型   代码如下: <%  服务器端:servletactioncontext.getresponse().setcharacterencoding("utf-8");  客户端 网页特效p/jsp.html target=_blank >jsp教程: <%@ page language="java" contenttype="text/html; charset=utf-

js调用AJAX时Get和post的乱码解决方法_javascript技巧

在使用"get"时,抓取的页面最后加上编码类型 复制代码 代码如下: <% 服务器端:servletactioncontext.getresponse().setcharacterencoding("utf-8"); 客户端 网页特效p/jsp.html target=_blank >jsp教程: <%@ page language="java" contenttype="text/html; charset=utf-

jQuery的Ajax时无响应数据的解决方法_jquery

复制代码 代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/GetOrderToBeCommentCount", success: function(result) { //ToDo: } ) 使用时JS也没有报错.这个是我最郁闷的事了.不知道哪错.. 5分钟...10分钟....20分钟..... 从c#代码到浏览器一个个排查问题发现都OK. 最后问题的原因是改为如下就OK,少了2个属性: 复制代码 代

jQuery结合AJAX之在页面滚动时从服务器加载数据

  这篇文章主要介绍了jQuery结合AJAX之在页面滚动时从服务器加载数据,文中示例服务器端为C#程序,需要的朋友可以参考下 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服

Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的各种数据类型做了一个总结! 本文章没有什么高难度技术,就是记录一下,汇总一下,以便以后需要时查看! 本总结牵涉的数据类型,主要有: string,int这样的基本数据类型 ClassA这样的自定义类 List<ClassA>这样的集合类型 Dictionary这样的字典类型数据 DataSet这样