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 url传值中文乱码之解决之道
Nov 20 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JavaScript严格模式详解
Nov 18 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 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调用数据库的存贮过程
2006/10/09 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
给Function做的OOP扩展
2009/05/07 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python django事务transaction源码分析详解
2017/03/17 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python调用支付宝支付接口流程
2019/08/15 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
python中的itertools的使用详解
2020/01/13 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
会计专业个人自我鉴定
2014/03/21 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Python中的pprint模块
2021/11/27 Python