JQuery的Ajax中Post方法传递中文出现乱码的解决方法


Posted in Javascript onOctober 21, 2014

本文实例讲述了JQuery中Post传递中文出现的解决方法,即乱码ajax与jquery.ajax中文参数post传递乱码处理方法。分享给大家供大家参考。具体分析如下:

问题一:

今天在做项目时,需要用到Ajax,之前我在用GET方式传递中文参数时,只需要在后台程序中设置页面编码为GB2312即中文能正常显示,可是这次由于表单项目较多,不适合用GET方式传递,只能用POST方式,但发现后台程序中设置编码为GB2312时中文还是显示的乱码。经过一番研究问题才最终得到解决。

解决方法:

解决此问题的方法非常简单,只需要在JS处理参数时用escape()函数处理一下即可,而且不需要再用unescape()解码,这个方法适合POST和GET方式,具体的Ajax代码这里我不例出,这里给出用escape()函数处理参数时的代码:

var htmer ="getcode="+escape(getcode)+"&Content="+escape(Content);
 

通常我们在处理Ajax的时候会在这里直接获取参数的值,为了使中文参数不是乱码,我们只需要用escape()函数对参数处理下即可。

问题二:

当网站页面不是utf-8编码时,ajax提交的中文便会变成乱码。

解决方法如下:

找到jquery.js里的contentType:application/x-www-form-urlencoded,将它改成contentType:application/x-www-form-urlencoded; charset=UTF-8就可以了。

原因:未指定charset时,jquery使用ISO-8859-1,ISO8859-1,通常叫做Latin-1。Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符。jquery的ajax根本没有考虑到国际化的问题,而使用了欧洲的字符集,所以传递中文时才会出现乱码

我很久以前一直在使用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/网页特效" 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>

此外,由于Ajax的默认汉字编码是utf-8,因此比较保险的方法是保证所涉及的页面统一编码格式为utf-8。

希望本文所述对大家基于的jQuery的Ajax程序设计有所帮助。

Javascript 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
jquery中post方法用法实例
Oct 21 #Javascript
js调试工具Console命令详解
Oct 21 #Javascript
JS中FRAME的操作问题实例分析
Oct 21 #Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 #Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 #Javascript
利用jquery操作Radio方法小结
Oct 20 #Javascript
利用a标签自动解析URL分析网址实例
Oct 20 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
详解python开发环境搭建
2016/12/16 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
经济管理专业毕业生推荐信
2013/11/11 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
党员作风建设自查报告
2014/10/23 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang