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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
phpfpm的作用和用法
2019/10/10 PHP
超级强大的表单验证
2006/06/26 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python自动生产表情包
2017/03/17 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
小学教师的个人自我鉴定
2013/10/24 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书