首页 >web前端 >js教程 >如何使用 JavaScript 和 jQuery 获取表单数据?

如何使用 JavaScript 和 jQuery 获取表单数据?

Susan Sarandon
Susan Sarandon原创
2024-11-12 02:03:02354浏览

How to Get Form Data Using JavaScript and jQuery?

使用 JavaScript/jQuery 获取表单数据

使用表单时,经常需要以编程方式检索它们包含的数据。该数据可用于进一步处理、验证或发送到服务器。幸运的是,使用JavaScript和jQuery,获取这些数据是一个简单的过程。

jQuery的serializeArray()方法

一种从表单获取数据的高效便捷的方法就是使用jQuery的serializeArray()方法。此方法返回对象的数组,其中每个对象代表表单中的一个输入元素。每个对象都包含元素的名称和值属性。

要使用此方法,只需在表单选择器上调用它:

var data = $('form').serializeArray();

数据数组将包含如下对象:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

jQuery的serialize()方法

另一个选项是使用 jQuery 的 serialize() 方法,该方法返回一个 string。此字符串表示传统 HTML 表单提交接受的格式的表单数据。

要使用此方法,只需在表单选择器上调用它:

var data = $('form').serialize();

数据变量将包含如下所示的字符串:

"foo=1&bar=xxx&this=hi"

演示

要查看这些实际方法,请查看以下小提琴:https://jsfiddle.net/w84ny75L/

以上是如何使用 JavaScript 和 jQuery 获取表单数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn