如何使用 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!

评论

1条评论
  1. Gravatar 头像

    Lucki 回复

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

发表评论

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