文章列表
 
您正在查看 "默认分类" 分类下的文章

2010-10-18 20:12

[版权声明]:版权归作者所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:
http://www.open-lib.com/Forum/Read_69_1.action

前言:

当jquery ajax在utf-8编码下(页面utf-8,接收utf-8),无任何问题。可以正常post、get,处理页面直接获取正确的内容。

但在以下情况下:

GBK -> AJAX POST ->GBK

UTF-8 -> AJAX POST ->GBK

后台代码无法获取正确的内容,通常表现为获取到奇怪字符、问号。

经典解决方法:

1:发送页面、接收页面均采用UTF-8编码。

2:发送页面在调用ajax post方法之前,将含有中文内容的input用encodeURIComponent编码一次,而接收页面则调用解码方法( 如:java.net.urldecoder.decode("接收到内容","utf-8") )。


其中,第一种方法无疑是最简单、最直接,但往往不符合实际,因为很多项目并不是使用utf-8编码,例如国内大部分使用gbk编码,也不可能为了解决这样一个问题,而将整个项目转换为utf-8编码,成本太大,风险太高。

第二方法,是现在最多人使用的方法,俗称二次编码,为什么叫二次编码,等下会解释。客户端编码两次,服务端解码两次。但这种方法不好的地方,就是前台手动编码一次,后台再手动解码一次,稍不留神就会忘记,而且代码掺和前台逻辑。

交互过程:

当我们使用表单按照传统方式post提交时候(非AJAX提交),浏览器会根据当前页面编码,encode一次,然后发送到服务端,服务端接收到表单,会自动dencode一次,通常这个过程是对程序是透明的,因此加上手动编码、解码,就变成上面所说的二次编码。

但当我们使用AJAX方式提交时候,浏览器并不会自动替我们encode,因此在jquery中有这样的一段代码:

ajax: function( s ) {
    
// Extend the settings, but re-extend 's' so that it can be
    // checked again later (in the test suite, specifically)
     s = jQuery.extend(true, s, jQuery.extend(true, {}, jQuery.ajaxSettings, s));

    
var jsonp, jsre = /=?(&|$)/g, status, data,
         type
= s.type.toUpperCase();

    
// convert data if not already a string
    if ( s.data && s.processData && typeof s.data !== "string" )
         s.data
= jQuery.param(s.data);
..    
}

以上是jquery的ajax方法的代码片段,下面是正常调用jquery ajax post的代码:

$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'html',
timeout:
20000,//超时时间设定
data:para,//参数设置
success: function(html){

}
});

通过上面代码可以知道,当设置了data时候,jquery内部会调用jQuery.param方法对参数encode(执行本应浏览器处理的encode)。

jQuery.param=function( a ) {
    
var s = [ ];
    
function add( key, value ){
         s[ s.length ]
= encodeURIComponent(key) + '=' + encodeURIComponent(value);
     };
    
// If an array was passed in, assume that it is an array
    // of form elements
    if ( jQuery.isArray(a) || a.jquery )
        
// Serialize the form elements
         jQuery.each( a, function(){
             add(
this.name, this.value );
         });

    
// Otherwise, assume that it's an object of key/value pairs
    else
        
// Serialize the key/values
        for ( var j in a )
            
// If the value is an array then the key names need to be repeated
            if ( jQuery.isArray(a[j]) )
                 jQuery.each( a[j],
function(){
                     add( j,
this );
                 });
            
else
                 add( j, jQuery.isFunction(a[j])
? a[j]() : a[j] );

    
// Return the resulting serialization
    return s.join("&").replace(/%20/g, "+");
}
//jquery.param end

上面是jQuery.param的代码,细心点可以留意到encodeURIComponent这方法,这是javascript内置的方法,对目标字符串执行utf-8 encode,因此,当页面使用gbk编码时候,服务端会使用gbk进行解码,但实际提交的数据是以utf-8编码的,所以造成接收到内容为乱码或者为问号。

解决方法:

encodeURIComponent会以utf-8编码,在gbk编码下,可不可以以gbk进行编码呢?

如果还在打encodeURIComponent主意的话,那不好意思,encodeURIComponent只会utf-8编码,并没有其他api进行其他编码;不过,别担心,看看下面:

encodeURIComponent,它是将中文、韩文等特殊字符转换成utf-8格式的url编码。

escape对0-255以外的unicode值进行编码时输出%u****格式,其它情况下escape,encodeURI,encodeURIComponent编码结果相同。

哈哈,看到希望吧?没错,就是用escape代替encodeURIComponent方法,不过必须注意:

escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z

encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

使用了escape之后必须对加号进行编码,否则,当内容含有加号时候会被服务端翻译为空格。

终于知道解决办法了,重写jquery代码:

jQuery.param=function( a ) {
    
var s = [ ];
    
var encode=function(str){
         str
=escape(str);
         str
=str.replace(/+/g,"%u002B");
        
return str;
     };
    
function add( key, value ){
         s[ s.length ]
= encode(key) + '=' + encode(value);
     };
    
// If an array was passed in, assume that it is an array
    // of form elements
    if ( jQuery.isArray(a) || a.jquery )
        
// Serialize the form elements
         jQuery.each( a, function(){
             add(
this.name, this.value );
         });

    
// Otherwise, assume that it's an object of key/value pairs
    else
        
// Serialize the key/values
        for ( var j in a )
            
// If the value is an array then the key names need to be repeated
            if ( jQuery.isArray(a[j]) )
                 jQuery.each( a[j],
function(){
                     add( j,
this );
                 });
            
else
                 add( j, jQuery.isFunction(a[j])
? a[j]() : a[j] );

    
// Return the resulting serialization
    return s.join("&").replace(/%20/g, "+");
}

上面那段代码并不需要在jquery的源文件重写,可以在你项目的javascript贴上,覆盖它原有的方法,不过必须在jquery加载之后。

经初步验证,上面那段代码在utf-8编码也可以工作正常,大概是编码成unicode的缘故吧。

这样,就不是需要使用什么二次编码,即影响前台,又影响后台。gbk编码下ajax post不再是问题了,此乃是终极解决方法。哈哈。

有兴趣的可以到http://www.open-lib.com/Forum/Read_69_1.action与作者交流。

 
2010-08-11 20:38
这是一个Ajax分页组件,用于创建web2.0的分页效果。页面内容通过Ajax动态加载。
这个jQuery分页插件在http://plugins.jquery.com/project/pagination这个插件的基础上增加了几个功能包括:在分页导航条的左边增加currentPage of   totalPage显示;利用cookie来保存当前选中的页码(如果24小时内再回到该页时,会自动选中上次离开时的页面);可以配置postUrl值,用于从服务器加载分页数据。
这个jQuery插件能够将页面上的任意一组元素进行快速,简便地分页。
一个利用jQuery开发的分页UI控件,可用于数据驱动的web应用程序中。
jPaginate是一个比较奇特的jQuery分页插件。当用户点击页码或鼠标移到箭头时,页码会向前或向后滚动。
一个支持自定义工具栏按钮的分页插件.
基于Mootools的拖动分页组件.
 
2010-01-07 9:38
很有创意的表单验证方式,拖动一个图标到指定的位置,创意可能来自Iphone的滑动解锁。


jMaxInput可以实现Textarea输入字数的限制,类似于微博中发消息的输入框。当输入的时候能够显示剩余可输入的字符数。


Chroma-Hash是一个能够为用户提供更好密码输入体验的jQuery插件。它能够将输入的值转换成某种颜色组合。用户只要记住正确密码的颜色,就能够判断自己输入的密码是否正确,而不需要等到提交服务器才知道是否正确。


Validatious2.0是一个非侵入式表单校验JavaScript函数包。不依赖于任何JavaScript框架,可以设置如何展示校验错误信息,在Callbacks中加入相进行的操作。

maxChar这个插件用于为任意HTML文本输入框(Input或Textarea)添加最多可输入字符限制,并动态显示剩余可输字符数。maxChar支持处理通过右键菜单粘入的字符数。

jQuery Numeric只允许在文本框中输入0到9数字的jQuery插件。
用法: $(input).numeric();


jQuery Live Form Validation是一个用于创建表单验证的jQuery插件。支持自定义校验规则,既可以在输入的时候实时校验,也可以在提交的时候校验。提示信息的样式完全可以通过CSS定义。


VanadiumJS是一个强大的客户端表单校验jQuery插件。完全可以定制校规则,VanadiumJS默认提供的一些规则包括:必填、一些特定的格式、数字(integer, float)、长度、checkboxes是否接受。

一个强大,灵活,可扩展的表单验证库。支持各种场合,从简单的如日期,电子邮件地址以及整数的验证,到复杂的,如正则表达式。内置 AJAX 支持,输出的错误消息可以定位到对象级。


一个轻量的表单验证库。除了传统的验证功能,还提供实时验证,可以一边输入一遍验证。Ruby on Rails 用户可能会发现这个库非常好用,因为他们的命名规则和参数十分近似。该库既有独立版本,又有一个 Prototype 版本。


JavaScript 表单验证框架。它拥有集成逻辑,一些设置可以针对全局,单个表单或单个对象。提供两个API,集成 AJAX 支持,缓存,以及回调函数。它提供类似 HTML 的 API 语句,以及面向对象的 JavaScript API 。


meioMask是一个可以让用户按指定格式输入的jQuery插件。既可以使用预先设置的格式,也在class属性中自定义输入格式。


这是一个可以让用户按设定好格式输入的MooTools插件。


JSValidate 是一个免费的脚本库,用于 确认表单 ,需要 Prototype 和 Script.aculo.us 支持运行。 它支持的一些规则包括: 必填字段仅允许数字仅允许字母 E-mail 信用卡号码格式美国邮政编码, 电话号码和国家代码格式 它的使用非常简单,具体请查看该脚本库的主页。


jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库) 、functionValidator (可使用外部函数来做校验)

这是一个采用Tooltip效果显示校验提示信息的表单校验jQuery插件。


基于Prototype框架开发,提供Form校验与Ajax提交功能。能够校验输入框中否必填,校验Email,日期,电话号码和URL等格式是否正确。利用Ajax发送数据,显示请求响应,加亮获取焦点的输入框等。


jQuery表单校验插件。
 
2009-12-29 14:42
jQuery Price Format Plugin这个jQuery插件能够将文本输入框中的数字格式化成金钱格式。比如输入123456会转成US$1,234.56。前缀US$和分隔符,都可以自定义(如可以转成¥1,234.56)。
jquery-watermark这个jQuery插件能够实现为表单文本框与文本区域增加水印提示功能。
PassShark这个MooTools class实现了一个类似于iPhone的密码输入框。在输入最后一个密码之后过一会儿才会将其屏蔽。
jCheckbox用于模拟checkbox的效果, 方便开发人员自定义外观, 由于所有的属性都绑定到目标checkbox, 所以不必担心状态保存或取值的问题...
基于jquery的编辑插件singleEdit.目前支持8种编辑方式,身份证,email等31种自带验证模式...
将文本框变成可编辑的下拉框(select/combo box)
LinkButton jQuery Plugin使你很容易将超连接美化为漂亮按钮的插件.
利用CSS和jQuery实现一个漂亮的Checkboxes控件。
利用这个jQuery插件可以在文本输入框中加类似于图片水印的帮助说明文字。当输入框获得焦点时水印还不会消失,只有当输入字符时才会消失。

Elastic jQuery plugin这个插件能够让Textareas随着输入内容的增加自动增长变化。

jQuery插件Linkselect可以将下拉框转换成链接下拉显示,丰富下拉框的展示形式, 如自定义下拉框外观,下拉框选择元素风格等
利用CSS+jQuery实现一个自定义的Select控件。可以定义外观,下拉项目除了文本还可以加图片。
Stylish Select Box是一个用于创建可自定义下拉框外观风格的jQuery插件。
jqTransform是一个表单换肤插件jQuery插件,它能够为普通的表单Form加上漂亮的外观。
Sexy Combo是一个jQuery插件,它能够将默认的selectboxes转换成更吸引人和便于使用的comboboxes控件。既可以让用户输入也可以从下拉选项中选择。
这个jQuery插件能够将普通的select下拉选择控件转换成,一个可以为下拉框中的每个选项添加不同图标的控件。
这个jQuery能够将普通的select html标签转换成一个下拉可多选checkbox控件。
Spinbox.JS这个JavaScript脚本能够将普通的文本输入框转换成可更换皮肤的Spin Boxe控件。
 
2009-12-29 14:41
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列,调整列宽度,排序,自定义单元格展示格式和编辑器,支持编辑和创建新记录。
这个PHP脚本提供一个向导用于根据数据库中的表格快速生成基于DhtmlxGrid的前台展示界面。
利用jQuery创建一个表头固定的简单HTML表格。在滚动条向下滚动时,表头不变化。
jQuery的表格控件
TableGear是一个MooTools插件用于为标准Html Table添加扩展功能包括:可以对表格中的数据进行排序,分页。通过Ajax删除,添加,修改数据。为行/列添加样式。该插件还支持通过键盘移动当前选中的单元格。
Sigma Grid是一个采用纯javascript开发的Ajax数据表格。
这是一个没有依赖任何JS框架开发的列表组件控件,支持排序功能。
jExpand是一个可以让表格具备可伸缩功能的jQuery插件。利用这个功能可以帮助你更好地组织表格,让表格承载更多的消息比如图片,列表,图表和其它元素。
这个控件能够将正常的HTML Table转成可排序,固定表头的Table。

目前为止是我见过的速度最快的Asp.net Grid。它的卓越表示在于:百万级别数据记录加载只用1秒……除此之外它还包括以下特点:

在设计时具有丰富的设定支持;
内置AJAX,不需要额外代码支持;
支持多列排序;
支持分页控制;
支持Grid模版内任何元素的自定义设置;
支持多条记录一次性批量添加/编辑/删除;
支持记录单选或多选;
支持记录过滤;
支持记录分组;
支持摘要(Summary);
语言本地化支持;
可调列宽;
支持导出到Microsoft EXCEL,WORD(97 & 2003);
垂直/水平滚动条;
支持固定/冻结某(些)栏;
支持主/从式样定制;
支持键盘导航;
支持打印功能。

国内一个为打造成为GT-Grid成为世界级的列表组件,方便支持多种应用。
MyTableGrid是一个基于是Prototype框架开发的DataGrid控件,用于以一种更易于浏览和更灵活的方式来展示数据。它提供Ajax支持的快速分页和数据排序功能,可以拖动调整数据列宽度,隐藏不需要显示的列。
moodgets Grid是一个基于Mootools框架开发,易于使用,可扩展的表格控件。拖动调整表格列宽,排序,多行或单行选择,单击表格单元格可编辑,分页,通过Ajax加载数据。
OmniGrid是一个采用Mootools1.2开发的表格控件与FlexGrid jQuery和SortableTable相似。具有分页,排序,Ajax数据加载,添加/修改/删除表格数据功能等。
DataTables是一个jQuery插件,能够让html表格很方便地实现分页、过滤和多栏排序等功能。DataTables可以使用本身自带的CSS样式,但还可以按自己的需要自定义CSS样式。它具有以下特征:
tableFormSynch是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括:基于表单中的数据,新增行。删除所选择行,并清除表单中的所有数据。tableFormSynch支持所有表单控件包括:checkboxes、radio、buttons与<select>。
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。
该DataTable控件提供的功能有:排序、列宽调整、分页、inline editing、row selection等。
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
 
 
   
 
 
文章分类
 
   
 
文章存档
 
     
 
最新文章评论
  
   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu