如何用 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. 允許多選

寫在最后

您的項目需求

二者之間的區別？