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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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中的Traits
2015/07/29 PHP
js的with语句使用方法
2007/09/21 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
国外软件测试工程师面试题
2016/12/09 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
培训感想范文
2015/08/07 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技