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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
javascript中Function类型详解
Apr 28 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
左侧是表头的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 如何向 MySQL 发送数据
2006/10/09 PHP
php与paypal整合方法
2010/11/28 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
vue跨域解决方法
2017/10/15 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
JS实现轮播图效果
2020/01/11 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
房产销售经理职责
2013/12/20 职场文书
开学季活动策划方案
2014/02/28 职场文书
小学同学聚会感言
2015/07/30 职场文书
结婚纪念日感言
2015/08/01 职场文书
学习十八大的感悟
2015/08/11 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby