真正的JQuery.ajax传递中文参数的解决方法
更新时间：2011年05月28日 01:12:43 作者：
许多人在使用JQuery.ajax方法时肯定会遇到一个问题。在编码不是UTF-8的时候，当传递的参数里有中文的时候，服务端Request的时候都会出现乱码。
本人最近也遇到了需要传递中文参数的问题。在网上搜索一下，复制粘贴发的到处都是的“终极”“解决方案”无非就是escape(str)来转码，然后在服务端还要写个方法再编辑一次，或用System.Text.Encoding下的方法来换来换去。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function DoAjax(){
$.post("AjaxTest.aspx",{txt:$("#tbox1").val()},
function(data){
$("#AjaxResponse").text(data);
}
);
}
</script>
</head>
<body>
<p><a href="javascript:DoAjax();">AjaxTest</a><input name="tbox1" id="tbox1" type="text" /></p>
<div id="AjaxResponse"></div>
</body>
</html>
AjaxTest.aspx:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<script runat="server">
string parms;
void Page_Load(object sender , EventArgs e)
{
parms=Request["txt"];
if (String.IsNullOrEmpty(parms)){
Response.Write("Is Null");
}else{
Response.Write(parms);
}
}
</script>
我很久以前一直在使用Prototype框架。在.net-GB2312或jsp-utf8下都使用过，从来没遇到有字符编码的问题。于是将Prototype和JQuery代码都下载下来打开研究原因。具体结果如下
不同之处在于JQuery默认的contentType:application/x-www-form-urlencoded
而Prototype则是contentType:application/x-www-form-urlencoded; charset=UTF-8
这才是JQuery正在乱码的原因，在未指定字符集的时候，是使用ISO-8859-1
ISO8859-1，通常叫做Latin-1。Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符。
JQuery的Ajax根本没有考虑到国际化的问题，使用了欧洲的字符集，所以才引起了传递中文出现乱码的问题。
而我们的UTF-8则可以解决这一问题。
最终指需要修改JQuery的代码，显式声明contentType使用utf-8字符集，即可解决GB2312中文传递的问题。
修改如图：
只需要简单的将JQuery的代码加以修改，加上charset=UTF-8就可以了，这样不需要改变改什么web.config或什么在页面中改编码什么的了，也不需要用escapc(str)再在服务端解码。英文怎么传递，中文也怎么传递。
给段简单的代码测试一下：
test.html:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function DoAjax(){
$.post("AjaxTest.aspx",{txt:$("#tbox1").val()},
function(data){
$("#AjaxResponse").text(data);
}
);
}
</script>
</head>
<body>
<p><a href="javascript:DoAjax();">AjaxTest</a><input name="tbox1" id="tbox1" type="text" /></p>
<div id="AjaxResponse"></div>
</body>
</html>
AjaxTest.aspx:
复制代码 代码如下:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<script runat="server">
string parms;
void Page_Load(object sender , EventArgs e)
{
parms=Request["txt"];
if (String.IsNullOrEmpty(parms)){
Response.Write("Is Null");
}else{
Response.Write(parms);
}
}
</script>
相关文章
这篇文章主要介绍了基于jquery实现日历签到功能，我们在玩游戏的时候或者登录某手机软件时都会有一个签到功能，记录大家的登录日期，这个日历签到如何实现？本文为大家进行揭晓。2015-11-11
这篇文章主要介绍了jquery css实现Tab栏切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本文给大家分享的是使用原生的js和jQuery2种方法，分别实现图片轮播的淡入淡出效果的代码，非常实用，也方便小伙伴们对比分析，希望对大家学习js和jq能够有所帮助。2015-04-04
jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求，下面我们就来仔细研究下这款jQuery插件的具体使用方法。2015-04-04
这篇文章主要介绍了jQuery实现点击小图显示大图效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了jQuery设置指定网页元素宽度和高度的方法,涉及jQuery操作width及height方法的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery增加、删除及修改select option的方法
这篇文章主要介绍了jQuery增加、删除及修改select option的方法,涉及jQuery针对form表单中select选项的常见操作技巧,需要的朋友可以参考下2016-08-08
下面小编就为大家带来一篇基于jQuery的表单填充实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
今天在做系统测试的时候，原本用Jquery写了一个动态加载的树形菜单，发现在IE7下无法加载数据，(采用的是jquery1.3.2版本的$.ajax方法)，上网查询到原来是IE7的执行ajax是用XMLHTTPRequest来声明的，经过对比果然如此；后采用以下的方法随即解决了问题。2009-11-11
最新评论