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 相关文章推荐
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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 一元分词算法
2009/11/30 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python实现关键词提取的示例讲解
2018/04/28 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
检举信的写法
2019/04/10 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
python神经网络Xception模型
2022/05/06 Python