芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
12

异步获取并提交表单数据

作者 芒果/分类 代码/发布于 2011-05-17 15:44

异步提交表单数据最痛苦的两个破事:

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('&');
版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/async-get-form-data-and-submit/" title="异步获取并提交表单数据" rel="bookmark">异步获取并提交表单数据 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 12 条群众意见

  1. banruosheng /2011-05-18 09:03

    恩,搜奈斯!我还没有遇到过这种场景,我应该期待一下 回应

    #1
  2. 性感美女 /2011-05-18 10:00

    时常会遇到乱码的时候呢,看来是要注意这一个了,不能马虎了 回应

    #2
  3. 美女图片 /2011-05-18 11:05

    呵呵!菜鸟,不敢期待······· 回应

    #3
  4. IM路人 /2011-05-18 14:26

    唉,feed订阅里广告和这里的尺寸不一样~~~ 回应

    #4
  5. 滕州 /2011-05-20 14:00

    嗯,学习了。不错。 回应

    #5
  6. mbt shoes /2011-05-21 11:38

    恩,学习了,谢谢博主分享,不错!!! 回应

    #6
  7. ?
    异步获取并提交表单数据 | 千里走单骑 /2011-05-21 12:37

    […] YUI 2.8 的层染色褪色效果 (2) © 2010 芒果 版权所有 | 固定链接 | 4 条评论 | 标签 YUI, YUI3 View full post on […] 回应

    #7
  8. ?
    Fuck IE!submit 事件不冒泡怎么办? | 千里走单骑 /2011-05-21 15:09

    […] 异步获取并提交表单数据 (4) […] 回应

    #8
  9. ?
    利用 iframe 假装异步提交表单 | 千里走单骑 /2011-05-21 15:22

    […] 异步获取并提交表单数据 (4) […] 回应

    #9
  10. ?
    当构造函数遇到 YUI3 封装机制 | 千里走单骑 /2011-05-21 15:50

    […] 异步获取并提交表单数据 (4) […] 回应

    #10
  11. 大尚网 /2011-06-11 15:27

    哎呀,真的是学习了呀 回应

    #11
  12. ?
    YUI3.3.0 中 transition 事件的变化 | 千里走单骑 /2011-06-14 14:41

    […] 异步获取并提交表单数据 (11) […] 回应

    #12

下面我简单说几句