如何用 JS 一次获取 HTML 表单的所有字段？

：如何用 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。*

作者：VALENTINO GAGLIARDI 译者：前端小智来源：valentinog

原文：https://www.valentinog.com/blog/form-data/

ttp请求中Form Data 和 Request Payload两种参数的区别 ?

Ajax Post请求中常用的两种的形式：form data 和 request payload

一、默认的表单方式请求 Form Data

post请求的Content-Type为application/x-www-form-urlencoded（默认的），参数是在请求题中，即上面请求中的Form Data。

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

代码格式：

data = {
  'i': '\u903B\u8F91\n',
  'from': 'AUTO',
  'to': 'AUTO',
  'smartresult': 'dict',
  'client': 'fanyideskweb',
  'salt': '15752746021826',
  'sign': 'c62688ce2eab6fd7a95cac50c3e88752',
  'ts': '1575274602182',
  'bv': '5bc00aa7005fda30bbc3c3735a53d97d',
  'doctype': 'json',
  'version': '2.1',
  'keyfrom': 'fanyi.web',
  'action': 'FY_BY_REALTlME'
}

复制代码

二、经浏览器解析后的表单请求 Request Payload

PS: 请求的Content-Type是application/json;charset=UTF-8，而请求表单的参数在Request Payload中。

Content-Type: application/json (这里用的是json格式)

代码格式：


payload = '{"operationName":"","query":"","variables":{"ownerId":"5c3f3c415188252b7d0ea40c","size":20,"after":""},"extensions":{"query":{"id":"b158d18c7ce74f0d6d85e73f21e17df6"}}}'

复制代码

二者之间的区别？

post请求，如果表单参数是在请求体中，也是以key1=value1&key2=value2的形式在请求体中。

通过chrome的开发者工具可以看到，比如：

fanyi.youdao.com/translate_o…

1、如果一个请求的Content-Type设置为

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

那么这个Post请求会被认为是Http Post表单请求，请求主体也将以一个标准的键值对和&的str形式出现。这种方式是HTML表单默认的设置，对现如今的网络请求构造是很常见的。

2、Request payload形式的POST请求，网站为了方便阅读，使用了Json这样的数据格式，请求的方式为

Content-Type: application/json 或者指定charset=UTF-8。

- 实战

使用requests模块post payload请求

在抓取个人数据的时候发现get形式获取不到数据，通过分析网站结构发现需要Post请求的json格式数据；进而发现其使用的Post格式并不是Form Data 而是Request Payload

第一步：先请求拿到数据再说

import requests
import json

# 首页地址
url = "https://web-api.juejin.im/query"

# 伪装成浏览器
headers = {
    'X-Legacy-Device-Id': '1574318487465',
    'Origin': 'https://juejin.im',
    'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36',
    'X-Legacy-Token': 'eyJhY2Nlc3NfdG9rZW4iOiJBNVNuRUNPb1Jad0doWm1wIiwicmVmcmVzaF90b2tlbiI6IkpuVkFoZFozdjNFdDZMOFMiLCJ0b2tlbl90eXBlIjoibWFjIiwiZXhwaXJlX2luIjoyNTkyMDAwfQ==',
    'Content-Type': 'application/json',
    'Referer': 'https://juejin.im/user/3650034335487975',
    'X-Legacy-Uid': '5dd631975188254e310b4cbb',
}

payload = '{"operationName":"","query":"","variables":{"ownerId":"5c3f3c415188252b7d0ea40c","size":20,"after":""},"extensions":{"query":{"id":"b158d18c7ce74f0d6d85e73f21e17df6"}}}'

# 发起网络请求，获取到返回的html
result = requests.post(url=url, headers=headers, data=payload).content.decode('utf-8')
print(result)

复制代码

这时候已经可以拿到payload表单形式的json数据了，因为考虑到是json格式的数据，不方便我们进行数据处理！接下来咱们先转换一下格式！这里转换成字典格式。

result=json.loads(result)
result_list=result['data']['ownActivityFeed']['items']['edges']
print(result_list)

复制代码

这个时候已经成功的将数据格式进行转换，之后并通过一直获取键值对的形式拿到网站所包含的数据；数据类型的格式为列表，再次深入获取

for item in result_list:
    # # 用户名
    node_list=item['node']
    user_targets_content=node_list['targets']
    for item_name_list in user_targets_content:
        try:
            user=item_name_list['user']
            user_name=user['username']
            user_content=item_name_list['content']
        except:
            continue
        print('*' * 30, '\n', user_name, user_content, '\n', '*' * 30)
        with open('lg_Tony.txt','a') as file:
            file.write(user_name+'\t\t'+user_content+'\n\n')
            
复制代码

考虑到只是获取简单的界面内容，所以这里只用了txt文件进行保存。

最终显示数据内容

在这个浮躁的时代；竟然还有人能坚持篇篇原创；

如果本文对你学习有所帮助-可以点赞+ 关注！将持续更新更多新的文章。

支持原创。感谢！

在开篇

什么是表单呢？当前端想要提交数据给后端，怎么搞？那么在前端开发中，表单是常用的手段，比如常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中，笔者除了讲一些基本的知识点，还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单，主要是通过from元素，我们先来一个最简单的小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

通上面的小栗子可以知道，form表单的主要通途是用于收集用户的输入。在from表单里面，还包含着各种不同类型的input元素，比如我们上面小栗子中用到的文本（text）、提交按钮（submit）。

input元素是表单里最重要的元素，它有很多type属性，下面我们来总结下：

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中，除了input元素之外，不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。下面我们看个小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，出了两道问答题，均为单选题。那么，类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是可以选择多个选项，当需要多选的时候，使用复选框输入类型就对了。看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，实现复选框的输入类型是checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是API服务，可以给它提交json。如果是前端页面，就需要通过构建表单来获取用户的输入。基于表单提交数据给后端，怎么提交？需要一个可以点击的提交按钮，那这个按钮怎么来？先看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

输入类型为submit，说明它就是提交按钮，注意上面代码type="submit"了吗？

HTML表单重要属性

1. Action属性

在之前的例子中，前端表单需要将数据提交给后端，除了需要一个提交按钮外，还需要action属性。当点击提交按钮后，表单的数据该发到后端的哪个url进行处理，就是定义在action属性中。接下来，我们结合前端和后端直接来个小实战，后端代码用Python的Flask框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，我们接下来看看效果

输入IP地址后，点击提交

这个ok是后端返回的

后端接收到数据后，啥也没做，只是做了简单打印

这个小栗子很简单，通过这个小栗子，是不是对action属性的用法有了进一步的理解呢？

2. Method属性

method属性的用途是指定提交数据的http方法，通常有2个，get和post。接下来我们在上个小栗子的基础上做个小改造，看下面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后，提交表单时，直接告诉你这是不允许的方法

在这个例子中，是因为前端的表单了指定了method为get请求，而后端接收数据的method规定了需要post请求，故所以出现这个问题。

下面我们改造一下后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求，再次提交，后端的返回如下：

看到了吗？后端判断前端过来的请求是get还是post，很显然，前端过来的请求是get，并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码，将请求修改为post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下，改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址，并点击提交

提交后，后端给前端返回了ok

接下来看下后端，后端啥也没做，就获取到表单的数据，然后打印了数据，并且打印了下数据类型

好了，关于前端的action属性和Method属性就讲到这里了。为了讲解action和method，还结合了后端的一丢丢知识，前端和后端的知识点以后都会慢慢讲到哈！

HTML表单常用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”，并提交

后端啥也没干，就只做了打印

2. 允许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图：

写在最后

关于表单基础知识点的讲解就这么愉快的结束了，关于更多表单的元素、输入属性、输入类型可自行查阅和实战，笔者因时间有限就不一一演示。感谢您的阅读，望多多关注我们、点赞、转发！

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

在线咨询

上一篇：HTML(5) 代码规范
下一篇：js 跳转页面方式详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何用 JS 一次获取 HTML 表单的所有字段？

从事件 target 获取表单字段

使用 FormData

总结

ttp请求中Form Data 和 Request Payload两种参数的区别 ?

二者之间的区别 ？

- 实战

使用requests模块post payload请求

第一步：先请求拿到数据再说

最终显示数据内容

在这个浮躁的时代；竟然还有人能坚持篇篇原创；

如果本文对你学习有所帮助-可以点赞+ 关注！将持续更新更多新的文章。

支持原创。感谢！

在开篇

盘点HTML表单基础

1. from元素

2. 单选按钮

3. 复选框

4. 提交按钮

HTML表单重要属性

1. Action属性

2. Method属性

HTML表单常用元素

1. 下拉列表

2. 允许多选

写在最后

您的项目需求

二者之间的区别？