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 相关文章推荐
javascript之AJAX框架使用说明
Apr 24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
js实现按座位号抽奖
Apr 05 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
How do I change MySQL timezone?
2008/03/26 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
javascript常用对话框小集
2013/09/13 Javascript
jquery图片切换插件
2015/03/16 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python多进程fork()函数详解
2019/02/22 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
2014年导购员工作总结
2014/11/18 职场文书