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


Posted in Javascript onJune 04, 2013

以前在新浪博客写过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"

Javascript 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 #Javascript
js判断undefined变量类型使用typeof
Jun 03 #Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 #Javascript
js+css实现增加表单可用性之提示文字
Jun 03 #Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 #Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
You might like
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php导入导出excel实例
2013/10/25 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
详解Python中break语句的用法
2015/05/14 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python缩进和冒号详解
2016/06/01 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
单位刻章介绍信范文
2014/01/11 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
心灵捕手观后感
2015/06/02 职场文书
优秀志愿者感言
2015/08/01 职场文书
推普标语口号大全
2015/12/26 职场文书
2019消防宣传标语!
2019/07/10 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL