jQuery Ajax传值到Servlet出现乱码问题的解决方法


Posted in Javascript onOctober 09, 2016

最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String testword=request.getParameter("criticalword")
System.out.println(testword);
out.println(testword);
out.flush();
out.close();
}

我只用的是ajax的get方式传递的,所以上面也只截取了doGet()方法的代码,那么对于乱码,会有哪几种情况呢,我谈一下我的看法,具体每个阶段的方法我会以代码和截图的方式给出:

1.保证jsp网页没有乱码

首先得确保你的JSP页面没有乱码,具体代码如下:

%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %

这句话添加在网页最顶部就可以了,补充下page指令的两个参数的具体含义,很多人也许会用,但是我觉得还是有必要了解下的:

a.pageEncoding参数

pageEncoding属性用来指定JSP页面的字符编码,默认为ISO-8859-1,由于该方法不支持中文,所以,如果要指定JSP页面的字符编码方式支持中文编码,则需要将page指令的pageEncoding属性设置为"GB2312"、"GBk"或"UTF-8"。

b.contentType参数

contentType属性用来指定JSP页面输出内容的类型和字符编码方式。属性值中的内容类型部分可以为text/html(纯文本HTML页面)、text/plain(纯文本文件)等。

2.保证jQuery Ajax在传递前没有乱码

下面贴出的Ajax代码,我要给后台传递的参数是get类型,参数名叫criticalword,代码如下:

$('#search').autocomplete({
source:function(request,response){

 alert('看看在传递前有没有乱码'+request.term);
$.ajax({
type:'get',
url:'/SGAME/servlet/IndexSearchItems',
data:{criticalword:encodeURI(request.term)},
success:function(response,status,xhr){
alert(response);
}
});
},
delay:100
})

正如我代码红色所标记的,你在传递前先alert()弹窗,测测看是不是你的js文件已经乱码,如果是的话,解决方法:

1.回查上一步是不是没解决

2.js文件编码问题:在资源管理器用记事本打开js,然后另存为,在编码里选择utf-8

如下图:

jQuery Ajax传值到Servlet出现乱码问题的解决方法

当你的第一个弹窗没有乱码,那说明在传给Servlet前没有问题,那个在进入下一步前先做一个准备工作,如上述红色代码所示,先给参数转码:

criticalword:encodeURI(request.term)

  这个转码是为了防止在Servlet中出现接收乱码的函数,形式为:encodeURI(param)

3.保证Servlet在接受Ajax的参数时(request)没有乱码

到了这一步说明你离成功不远了,只需要先request和resopnse设置编码的方式,然后再解码即可,doGet代码如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String testword=URLDecoder.decode(request.getParameter("criticalword"),"utf-8");
System.out.println(testword);
out.println(testword);
out.flush();
out.close();
}

  其中主要有三个要点:

a.response.setContentType():用于设置响应回jsp或者Ajax的字符编码。

b.request.setCharacterEncoding():用于设置接收请求的响应编码。

c.URLDecoder.decode():此函数需要先导入java.net包,用于对Ajax的编码进行解码。

完成以上三个步骤后,你可以像我一样,在返回前加一个System.out.println(yourParam)试试,如果是中文那就没问题啦

4.保证Servlet在响应(response)给jsp没有乱码

 其实在第三部的要点b设置好后,其实返回给html或jsp就应该之中文了。

注:如果你用的是post方法,直接在Ajax里加上contentType:application/x-www-form-urlencoded;charset=utf-8就可以了,不需要进行转码。

Javascript 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
BootStrap中Table分页插件使用详解
Oct 09 #Javascript
微信小程序 for 循环详解
Oct 09 #Javascript
微信小程序 条件渲染详解
Oct 09 #Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 #Javascript
最实用的jQuery分页插件
Oct 09 #Javascript
js本地图片预览实现代码
Oct 09 #Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Yii框架安装简明教程
2020/05/15 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
解析Python中while true的使用
2015/10/13 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python 判断网络连通的实现方法
2018/04/22 Python
python解析xml简单示例
2019/06/21 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
《大江保卫战》教学反思
2014/04/11 职场文书
班风口号
2014/06/18 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android