如何用 JS 一次获取 HTML 表单的所有字段 ?
作者:VALENTINO GAGLIARDI 译者:前端小智 来源:valentinog 移动端阅读:https://mp.weixin.qq.com/s/rj...
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
问:如何用 JS 一次获取 HTML 表单的所有字段 ?
考虑一个简单的 HTML 表单,用于将任务保存在待办事项列表中:
<form>
<label for="name">用户名</label>
<input type="text" id="name" name="name" required>
<label for="description">简介</label>
<input type="text" id="description" name="description" required>
<label for="task">任务</label>
<textarea id="task" name="task" required></textarea>
<button type="submit">提交</button>
</form>
上面每个字段都有对应的的type
,ID
和 name
属性,以及相关联的label
。 用户单击“提交”按钮后,我们如何从此表单中获取所有数据?
有两种方法:一种是用黑科技,另一种是更清洁,也是最常用的方法。为了演示这种方法,我们先创建form.js
,并引入文件中。
从事件 target 获取表单字段
首先,我们在表单上为Submit
事件注册一个事件侦听器,以停止默认行为(它们将数据发送到后端)。
然后,使用this.elements
或event.target.elements
访问表单字段:
相反,如果需要响应某些用户交互而动态添加更多字段,那么我们需要使用FormData
。
使用 FormData
首先,我们在表单上为submit
事件注册一个事件侦听器,以停止默认行为。接着,我们从表单构建一个FormData
对象:
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
const formData = new FormData(this);
});
除了append()
、delete()
、get()
、set()
之外,FormData 还实现了Symbol.iterator
。这意味着它可以用for...of
遍历:
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
const formData = new FormData(this);
for (const formElement of formData) {
console.log(formElement);
}
})
除了上述方法之外,entries()
方法获取表单对象形式:
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
const formData = new FormData(this);
const entries = formData.entries();
const data = Object.fromEntries(entries);
});
这也适合Object.fromEntries()
(ECMAScript 2019)
为什么这有用?如下所示:
const form = document.forms[0];
form.addEventListener("submit", function(event) {
event.preventDefault();
const formData = new FormData(this);
const entries = formData.entries();
const data = Object.fromEntries(entries);
// send out to a REST API
fetch("https://some.endpoint.dev", {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
})
.then(/**/)
.catch(/**/);
});
一旦有了对象,就可以使用fetch
发送有效负载。
小心:如果在表单字段上省略
name
属性,那么在FormData对象中刚没有生成。
总结
要从HTML表单中获取所有字段,可以使用:
-
this.elements
或event.target.elements
,只有在预先知道所有字段并且它们保持稳定的情况下,才能使用。
使用FormData
构建具有所有字段的对象,之后可以转换,更新或将其发送到远程API。*
原文:https://www.valentinog.com/bl...
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
- [喵咪BELK实战(2)] elasticsearch+kibana搭建
- 【第二期】一次学透java.io
- [喵咪BELK实战(1)]浅谈日志的重要性以及介绍BELK
- Unicode编解码函数
- 适配器模式
- [PhalApi实战篇(1)]Redis队列处理异步任务
- 修饰者模式
- PhalApi-RabbitMQ基于PhalApi专业队列拓展
- Python的三个问题
- [喵咪开源软件推荐(4)]Liunx跑分神器-unixbench
- 正则化贪心森林(RGF)的入门简介,含案例研究
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 路由(二)之分库分表路由
- [喵咪开源软件推荐(3)]全球IP库-GeoLite2-City
- [喵咪MQ(3)]RabbitMQ集群安装配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python爬虫常见异常及解决办法
- 理解nodejs中js和c++的通信原理
- 如何使用FFmpeg将互联网直播点播平台内直播视频流转化为HLS流?
- 记一次nodejs问题排查
- 使用Go语言编译互联网视频直播点播平台EasyDSS出现ld returned 1 exit status错误
- c/c++补完计划(四): 字节对齐和虚继承
- Python 不用selenium 带你高效爬取京东商品评论
- 《闲扯Redis六》Redis五种数据类型之Hash型
- rocketmq学习2
- Python全栈(八)Flask项目实战之1.项目搭建
- 一起来读开源项目的代码-Agar.io为例
- C语言入门系列之11.文件和文件操作
- 自己动手改造 Jetpack LiveData
- FastDFS基于Docker安装
- 用Python实现批量高效文件处理 解放你的双手