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 相关文章推荐
基于jquery的loading效果实现代码
Nov 05 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
详解JS面向对象编程
Jan 24 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
vue.js实现简单购物车功能
May 30 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php 删除记录实现代码
2009/03/12 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
Maps Javascript
2007/01/22 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
实例详解Node.js 函数
2018/06/10 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
Python脚本实现虾米网签到功能
2016/04/12 Python
QML使用Python的函数过程解析
2019/09/26 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python super()函数使用及多重继承
2020/05/06 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
建设单位项目负责人任命书
2014/06/06 职场文书
高三霸气励志标语
2014/06/24 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
司考复习计划
2015/01/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python基础之模块的导入
2021/10/24 Python
redis lua限流算法实现示例
2022/07/15 Redis