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 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
dedecms模版制作使用方法
2007/04/03 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
python中关于日期时间处理的问答集锦
2013/03/08 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python实现多人聊天室
2020/03/31 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
编辑个人求职信范文
2013/09/21 职场文书
实习老师个人总结的自我评价
2013/09/28 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
岗位说明书范文
2014/05/07 职场文书
迎新晚会策划方案
2014/06/13 职场文书
关爱留守儿童标语
2014/06/18 职场文书
就业协议书怎么填
2014/09/15 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
学生会辞职信
2015/03/02 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python