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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php 全局变量范围分析
2009/08/07 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
如何写出好的Java代码
2014/04/25 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2019 入党申请书范文
2019/07/10 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
关于使用Redisson订阅数问题
2022/01/18 Redis