jQuery调用AJAX时Get和post公用的乱码解决方法实例说明


Posted in Javascript onJune 04, 2013

以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法,但是使用js代码比较繁琐,我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery。

一个网站的设计,不管是注册登录还是分页查找,都需要提交参数到服务器以便得到所需的页面数据。为了减少用户因刷新页面带来的煎熬,ajax诞生。但是初学者进行项目开发时,会遇到一个很烦人的问题:中文乱码。

下面我就通过一个简单的实例来告诉大家哪些地方可能会导致乱码,我们需要通过什么方式来解决。
我们这个实例主要实现用户注册时用户名是否正确(已存在),在焦点移开username文本text时,对username进行异步提交并由servlet进行提取判断,并将结果返回页面做出相应提示。

第一步,新建一个web工程(默认GBK格式),取名jQuery_Ajax。在其WebRoot目录下新建js文件包,将jquery-1.4.4.js放于其中。

第二步,在src下创建servlet包,并编写Vali.java

package servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.net.URLDecoder; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
public class Vali extends HttpServlet { 
@Override 
protectedvoid service(HttpServletRequest request, HttpServletResponse response) 
throwsServletException, IOException { 
StringuserName = URLDecoder.decode(request.getParameter("userName"),"utf-8"); 
System.out.println(userName); 
response.setContentType("text/html;charset=utf-8"); 
PrintWriter pw =response.getWriter(); 
if(userName.equals("张三")){ 
pw.println("错误"); 
}else{ 
pw.println("正确"); 
} 
} 
}

从可从代码看出,含有编码格式的语句便是解决乱码的办法之一。
在代码中注意:
1.URLDecoder.decode(request.getParameter("userName"),"utf-8")——将页面传来的数据进行格式转换并提取
2.response.setContentType("text/html;charset=utf-8")——将响应返回值进行utf-8编码后返回页面
3.特别注意2中的转换需写在本方法内一切的response之前,否则可能失效
4.本servlet对数据的格式编码只适合Post方法,若提交方式为GET则提取页面数据的代码如下:
request.setCharacterEncoding("utf-8"); 
StringuserName = request.getParameter("userName"); 
userName= new String(userName.getBytes("iso-8859-1"),"utf-8");

第三步,编写简单注册页面ajax.jsp
<%@ page language="java"import="java.util.*" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'ajax.jsp' starting page</title> 
<metahttp-equiv="pragma" content="no-cache"> 
<metahttp-equiv="cache-control" content="no-cache"> 
<metahttp-equiv="expires" content="0"> 
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> 
<metahttp-equiv="description" content="This is my page"> 
<!-- 
<linkrel="stylesheet" type="text/css"href="styles.css"> 
--> 
<scripttype="text/javascript"src="js/jquery-1.4.4.js"></script> 
<scripttype="text/javascript"> 
function vali(){ 
$.ajax({ 
type:"POST", 
url:"/jQuery_Ajax/Vali", 
data:encodeURI(encodeURI("userName="+$(":text").val())), 
success:function(data){ 
$("span").text(data); 
} 
}); 
} 
</script> 
</head> 
<body> 
用户名:<inputtype="text" name="userName"onblur="vali();"/><span></span><br/> 
密码:<inputtype="password" name="password" /> 
</body> 
</html>

在代码中注意:
1.页面要设置为utf-8,且引入jquery-1.4.4.js
2.ajax通过POST方法传递数据,注意data的设置。将返回数据填入span标签。

如果使用GET方法传递页面数据,js代码如下:

function vali(){ 
$.ajax({ 
type:"GET", 
url:"/jQuery_Ajax/Vali", 
data:encodeURI("userName="+$(":text").val()), 
success:function(data){ 
$("span").text(data); 
} 
}); 
}

最后一步,在web.xml配置servlet和映射
<servlet> 
<description>This is the description of my J2EEcomponent</description> 
<display-name>This is the display name of my J2EEcomponent</display-name> 
<servlet-name>Vali</servlet-name> 
<servlet-class>servlet.Vali</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>Vali</servlet-name> 
<url-pattern>/Vali</url-pattern> 
</servlet-mapping>

经过以上代码的编写,本注册验证的项目已完成,将其部署至tomcat并通过网页访问。

最后总结大神的jQuery乱码问题解决方法
1. 检查页面编码,将页面编码设置为utf8,如下:
<metahttp-equiv="content-type" content="text/html;charset=utf-8">
2. 检查servlet,在doPost或doGet方法中添加如下代码:
response.setContentType("text/xml;charset=utf-8");
3. 修改tomcat文件,在TOMCAT_HOME/conf/server.xml文件中增加URIEncoding=”utf8”:
<Connector port="8080"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"URIEncoding="utf-8"/>
4. 在工程中新增过滤器,将编码方式设置为utf8
经过以上四步操作后,问题依旧。
5. 检查ie的http header,查看contentType字段,如下:
contentType:"application/x-www-form-urlencoded"
6.检查firefox的http header,查看contentType字段,如下:
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
对比5,6两步,问题出现。
7.修改jQuery-1.x.x.js文件,将
contentType:"application/x-www-form-urlencoded"改为下面的代码
contentType:"application/x-www-form-urlencoded;charset=UTF-8"

Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 #Javascript
js判断undefined变量类型使用typeof
Jun 03 #Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 #Javascript
js+css实现增加表单可用性之提示文字
Jun 03 #Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 #Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
You might like
PHP代码加密的方法总结
2020/03/13 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python生成器generator用法实例分析
2015/06/04 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python生成器generator原理及用法解析
2020/07/20 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
护士自我评价范文
2014/01/25 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
小学新教师培训方案
2014/02/03 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
软件售后服务承诺书
2014/05/21 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL