/* 336x280*/
异步提交表单数据最痛苦的两个破事:
1、编码乱码问题
事实上 ajax 技术底层是 unicode 编码,当 GBK 的页面与接口进行数据交互时,会产生乱码情况。解决方案有多种,可以将页面转化为 utf-8 编码,或者发送数据前进行两次 encodeURI 编码,在接受数据时进行一次解码。
2、获取表单字段数据
拿 YUI3 来说,其实原生的 io-form 模块已经做了很好的封装。其中有个叫做 _serialize 的私有方法,可以对异步提交表单的行为进行预先编码:
data: encodeURI(Y.io._serialize({
id: '#formId',
useDisabled: true
}))
即使用了一个龌龊的私有方法,看上去确还算完美。假如字段的 name 属性中没有“[]”等特殊符号,一般情况下都是没问题的。
这个 _serialize 方法的原理很简单,通过获取节点内 input,select 和 textarea 等字段,然后根据 name 遍历并取值即可。
一个简单的代码案例(YUI3):
var parameters = [], nodeList;
nodeList.each(function (v) {
parameters.push(v.get('name') + '=' + Y.Lang.trim(v.get('value')));
});
parameters = parameters.join('&');
/* 336x280*/
版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/async-get-form-data-and-submit/" title="异步获取并提交表单数据" rel="bookmark">异步获取并提交表单数据 | 芒果小站</a>
已经有 12 条群众意见
- banruosheng
#1/2011-05-18 09:03恩,搜奈斯!我还没有遇到过这种场景,我应该期待一下 回应
- 性感美女
#2/2011-05-18 10:00时常会遇到乱码的时候呢,看来是要注意这一个了,不能马虎了 回应
- 美女图片
#3/2011-05-18 11:05呵呵!菜鸟,不敢期待······· 回应
- IM路人
#4/2011-05-18 14:26唉,feed订阅里广告和这里的尺寸不一样~~~ 回应
- 滕州
#5/2011-05-20 14:00嗯,学习了。不错。 回应
- mbt shoes
#6/2011-05-21 11:38恩,学习了,谢谢博主分享,不错!!! 回应
- 异步获取并提交表单数据 | 千里走单骑
#7/2011-05-21 12:37[...] YUI 2.8 的层染色褪色效果 (2) © 2010 芒果 版权所有 | 固定链接 | 4 条评论 | 标签 YUI, YUI3 View full post on [...] 回应
- Fuck IE!submit 事件不冒泡怎么办? | 千里走单骑
#8/2011-05-21 15:09[...] 异步获取并提交表单数据 (4) [...] 回应
- 利用 iframe 假装异步提交表单 | 千里走单骑
#9/2011-05-21 15:22[...] 异步获取并提交表单数据 (4) [...] 回应
- 当构造函数遇到 YUI3 封装机制 | 千里走单骑
#10/2011-05-21 15:50[...] 异步获取并提交表单数据 (4) [...] 回应
- 大尚网
#11/2011-06-11 15:27哎呀,真的是学习了呀 回应
- YUI3.3.0 中 transition 事件的变化 | 千里走单骑
#12/2011-06-14 14:41[...] 异步获取并提交表单数据 (11) [...] 回应
我简单说几句