如何使用 JavaScript 获取对象形式的表单数据

  • 内容
  • 评论
  • 相关

在前端开发中,获取表单中填写的数据是一个常见到不能再常见的需求,通常我们需要利用这些数据完成 AJAX 提交、合法性验证以及动态生成元素之类的功能。

如何使用 JavaScript 获取对象形式的表单数据

一点前奏

据我观察,绝大多数情况下我们都是直接使用 jQuery 提供的 $.serialize() 方法,获取类似于 GET 参数一样的字符串,比如说我们使用这样的代码:

$( '#commentform' ).serialize();

可以得到这样的一段字符串:

comment=%E5%8D%9A%E4%B8%BB%E5%A5%BD%E5%B8%85%E5%95%8A%EF%BC%81+()&author=%E4%B8%8D%E6%98%AF%E6%96%8C%E6%9E%9C&email=bushibinguo%40not.bgbk.org&url=ftp%3A%2F%2Fnot.bgbk.org

实际上,AJAX 请求需要的也就是这种格式的数据,所以在大多数情况下,这就可以了,没有再继续深究的必要。

但如果我们需要对这些数据进行各种各样奇奇怪怪的处理时,还是希望能够获得这样一种键名对键值的对象数据:

{
	"comment": "博主好帅啊! ()",
	"author":  "不是斌果",
	"email":   "bushibinguo@not.bgbk.org",
	"url":     "ftp://not.bgbk.org"
}

比较方便下手,是吧。

方法一、jQuery 插件(强推)

比较熟悉 jQuery 的同学可能会知道 jQuery 的另一个方法,叫 $.serializeArray()。在我刚刚看到它的时候,产生了一种「问题已经解决了」的错觉。

它虽然是获取到了对象形式的表单数据,但和我们想象中的还是有些差距,是这样的:

[
	{
		"name":  "comment",
		"value": "博主好帅啊! ()"
	},

	{
		"name":  "author",
		"value": "不是斌果"
	},

	{
		"name":  "email",
		"value": "bushibinguo@not.bgbk.org"
	},

	{
		"name":  "url",
		"value": "ftp://not.bgbk.org"
	}
]

WOW,我根本就想象不出来为什么要这么设计,或许自有它的道理,但我这个 JavaScript 小白暂时还理解不了这么多,只想要一个键值对键名的对象。

经过一些搜索,我找到了一个叫做 jQuery serializeObject 的插件,非常小,只有几行代码,就能完全解决我们的问题,只需要你在 jQuery 加载之后添加这坨代码(未压缩源码参考插件主页):

(function($,a){$.fn.serializeObject=function(){var b={};$.each(this.serializeArray(),function(d,e){var f=e.name,c=e.value;b[f]=b[f]===a?c:$.isArray(b[f])?b[f].concat(c):[b[f],c]});return b}})(jQuery);

然后再使用类似于这样的代码获取表单数据:

$( '#commentform' ).serializeObject();

当当当当!一个我们需要的,带有表单数据的,键值对键名的对象就返回出来了,大功告成,非常简单吧!

Tips:jQuery 中还有一个常用的 $.param() 方法,用来将对象序列化成查询参数,实际上 $.serialize() 方法就是 $.param( $( '#commentform' ).serializeArray() ) 的封装。

方法二、利用 Underscore.js

好吧,我承认这种方法可能并不常用,但也是我辛辛苦苦搜索出来的,怎么能不批判宣传一番呢?

如果你的项目中同时使用了 jQuery 和 Underscore.js,那么上边的代码还可以继续精简一下,变成这样:

jQuery.fn.serializeObject = function() {
	return _.object( _.map( this.serializeArray(), _.values ) );
}

OK,用法和上边一样。

方法三、原生 JavaScript

恩,我这边找了半天,这远没有想象中的简单,如果可能,还是尽量使用 jQuery 吧。

但总不能让你白来一趟,介绍一个偶然发现的 get-form-data 项目吧,安装它之后,可以使用类似于这样的代码获取对象形式的表单数据:

getFormData( document.querySelector( '#commentform' ) );

至于兼容性嘛,嘿嘿嘿,在乎这些的话就赶紧去用 jQuery!

评论

10条评论
  1. Gravatar 头像

    开口 回复

    测试ajax评论

  2. Gravatar 头像

    可靠 回复

    支持

  3. Gravatar 头像

    yy4080 回复

    当当当当!一个我们需要的,带有表单数据的,键值对键名的对象就返回出来了,大功告成,非常简单吧!

  4. Gravatar 头像

    yy4410 回复

    女人一生喜欢两朵花:一是有钱花,二是尽量花。

  5. Gravatar 头像

    height exercise 回复

    I comment each time I appreciate a post on a site or if
    I have something to valuable to contribute to the conversation. It is caused by the fire displayed in the article I looked at.
    And on this article 如何使用 JavaScript 获取对象形式的表单数据
    - 斌果博客. I was excited enough to write a leave a responsea response :
    -P I actually do have a few questions for you if you do not mind.
    Is it only me or does it look as if like some of these remarks come across like written by brain dead people?
    😛 And, if you are writing on additional places,
    I would like to keep up with anything new you have to post.
    Could you list the complete urls of all your shared pages like
    your linkedin profile, Facebook page or twitter feed?

  6. Gravatar 头像

    阿斯达 回复

    😐 😐 😐 😐 😐 😳 😳 😳 😳 sdsad怎么了

  7. Gravatar 头像

    Lucki 回复

    😳 😳 😳 😳 测试评论,是ajax提交么?

发表评论

电子邮件地址不会被公开。 必填项已用*标注