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二级、多级联动的简单实例
Feb 18 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
js+html获取系统当前时间
Nov 10 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
vue-test-utils初使用详解
May 23 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
如何使用原生Js实现随机点名详解
Jan 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
实现PHP搜索加分页
2016/10/12 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Django中使用group_by的方法
2015/05/26 Python
Python制作数据导入导出工具
2015/07/31 Python
python中使用print输出中文的方法
2018/07/16 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
文言文形式的学生求职信
2013/12/03 职场文书
销售简历自我评价
2014/01/24 职场文书
影子教师研修方案
2014/06/14 职场文书
学校欢迎标语
2014/06/18 职场文书
公司委托书格式范本
2014/09/16 职场文书
失职检讨书大全
2015/01/26 职场文书
前台接待员岗位职责
2015/04/15 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript