16.HTML 表單提交

現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

<input type="text" name="username" required>

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個FormData對象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個空對象來存儲表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當(dāng)點(diǎn)擊按鈕時會調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個FormData對象。然后，我們遍歷FormData對象，將表單數(shù)據(jù)復(fù)制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會處理所有的邏輯，并且通過返回false來阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

在開篇

什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開發(fā)中，表單是常用的手段，比如常見的場景有：登錄框、賬號注冊頁、主機(jī)信息錄入CMDB等等場景都是需要表單。那么在本篇中，筆者除了講一些基本的知識點(diǎn)，還會再結(jié)合后端的方式來演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。

盤點(diǎn)HTML表單基礎(chǔ)

1. from元素

構(gòu)建表單，主要是通過from元素，我們先來一個最簡單的小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息錄入CMDB</h3>
        <form>
            <label for="hostname">主機(jī)名：</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屬性，下面我們來總結(jié)下：

類型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕

在上面小栗子中，除了input元素之外，不知道大家注意label元素沒有。label元素的主要用途是為input元素定義標(biāo)簽，且用for屬性和input元素的id屬性進(jìn)行綁定呢。

2. 單選按鈕

什么是單選按鈕？就是在多個選項(xiàng)中，你只能選其中1個，不能多選。下面我們看個小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</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（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</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來實(shí)現(xiàn)需要使用單選按鈕的場景。

3. 復(fù)選框

什么是復(fù)選框？復(fù)選框就是可以選擇多個選項(xiàng)，當(dāng)需要多選的時候，使用復(fù)選框輸入類型就對了。看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問題？</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（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺得是否對你有幫助？</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>

效果如下圖：

上面的小栗子中，實(shí)現(xiàn)復(fù)選框的輸入類型是checkbox，這個是重點(diǎn)哦！

4. 提交按鈕

當(dāng)有數(shù)據(jù)要提交給后端的時候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁面，就需要通過構(gòu)建表單來獲取用戶的輸入。基于表單提交數(shù)據(jù)給后端，怎么提交？需要一個可以點(diǎn)擊的提交按鈕，那這個按鈕怎么來？先看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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屬性

在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個提交按鈕外，還需要action屬性。當(dāng)點(diǎn)擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個url進(jìn)行處理，就是定義在action屬性中。接下來，我們結(jié)合前端和后端直接來個小實(shí)戰(zhàn)，后端代碼用Python的Flask框架。

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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地址后，點(diǎn)擊提交

這個ok是后端返回的

后端接收到數(shù)據(jù)后，啥也沒做，只是做了簡單打印

這個小栗子很簡單，通過這個小栗子，是不是對action屬性的用法有了進(jìn)一步的理解呢？

2. Method屬性

method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個，get和post。接下來我們在上個小栗子的基礎(chǔ)上做個小改造，看下面代碼

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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)

當(dāng)前端輸入數(shù)據(jù)后，提交表單時，直接告訴你這是不允許的方法

在這個例子中，是因?yàn)榍岸说谋韱瘟酥付薽ethod為get請求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請求，故所以出現(xiàn)這個問題。

下面我們改造一下后端代碼：

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

前端表單中的method還是保持get請求，再次提交，后端的返回如下：

看到了嗎？后端判斷前端過來的請求是get還是post，很顯然，前端過來的請求是get，并且返回了非常友好的提示。

接下來我們繼續(xù)改造一下前端的代碼，將請求修改為post，代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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>

后端代碼也稍微改造一下，改變接收前端數(shù)據(jù)的方法

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

輸入IP地址，并點(diǎn)擊提交

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

接下來看下后端，后端啥也沒做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類型

好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識，前端和后端的知識點(diǎn)以后都會慢慢講到哈！

HTML表單常用元素

1. 下拉列表

先來個前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</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 '提交數(shù)據(jù)需要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>彩虹運(yùn)維技術(shù)棧社區(qū)主頁</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開發(fā)應(yīng)掌握的技能：</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">數(shù)據(jù)庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代碼中，是使用multiple屬性來實(shí)現(xiàn)選擇多個值。

后端代碼的打印方式稍微做了些許調(diào)整：

# 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 '提交數(shù)據(jù)需要post請求'

if __name__ == '__main__':

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

按住ctrl或者shift鍵可進(jìn)行多選

后端打印的效果圖下圖：

寫在最后

關(guān)于表單基礎(chǔ)知識點(diǎn)的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類型可自行查閱和實(shí)戰(zhàn)，筆者因時間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點(diǎn)贊、轉(zhuǎn)發(fā)！

本文轉(zhuǎn)載于（喜歡的盆友關(guān)注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

解HTTP協(xié)議中的POST方法：四種常用的提交數(shù)據(jù)方式

SEO Meta Description: 了解HTTP協(xié)議中POST方法的四種常用提交數(shù)據(jù)方式：表單提交、JSON數(shù)據(jù)、XML數(shù)據(jù)和文件上傳，確保高效數(shù)據(jù)傳輸和服務(wù)器處理。

在互聯(lián)網(wǎng)通信中，HTTP協(xié)議中的POST方法是向服務(wù)器提交數(shù)據(jù)的常用手段。POST請求不僅可以傳輸簡單的表單數(shù)據(jù)，還能處理復(fù)雜的JSON、XML數(shù)據(jù)以及文件上傳。本文將詳細(xì)介紹四種常用的POST數(shù)據(jù)提交方式，幫助開發(fā)者選擇適合的方式進(jìn)行數(shù)據(jù)傳輸。

云服務(wù)器，高防服務(wù)器就選藍(lán)易云，頭條搜索：藍(lán)易云

POST方法概述

POST方法是HTTP協(xié)議中用于向服務(wù)器發(fā)送數(shù)據(jù)的一種請求方法。與GET方法不同，POST方法將數(shù)據(jù)包含在請求體中，而不是通過URL參數(shù)傳遞。這種方式確保了數(shù)據(jù)的安全性和隱私性，特別適合于需要傳輸大量數(shù)據(jù)或敏感信息的場景。

表單提交（Form Data）

概述

表單提交是最常見的POST數(shù)據(jù)方式之一。在HTML中，通過設(shè)置 <form>標(biāo)簽的 method屬性為 post，可以將用戶輸入的數(shù)據(jù)發(fā)送到服務(wù)器。數(shù)據(jù)以 application/x-www-form-urlencoded格式編碼，作為鍵值對的形式傳遞。

數(shù)據(jù)格式

表單數(shù)據(jù)會被編碼為URL參數(shù)，例如：

key1=value1&key2=value2

示例

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

服務(wù)器處理

服務(wù)器可以通過解析請求體中的數(shù)據(jù)來獲取表單字段的值。以下是一個簡單的示例，展示了如何在Node.js中處理表單提交的數(shù)據(jù)：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

JSON數(shù)據(jù)（JSON Data）

概述

JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，常用于Web應(yīng)用程序與服務(wù)器之間的數(shù)據(jù)傳輸。在POST請求中，客戶端可以將數(shù)據(jù)作為JSON對象發(fā)送給服務(wù)器。

數(shù)據(jù)格式

請求的 Content-Type頭部應(yīng)設(shè)置為 application/json，請求體中包含一個JSON對象，例如：

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

示例

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  })
});

服務(wù)器處理

服務(wù)器端可以解析JSON數(shù)據(jù)并進(jìn)行相應(yīng)的處理。以下是一個簡單的示例，展示了如何在Node.js中處理JSON數(shù)據(jù)：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

app.post('/submit', (req, res) => {
  const { name, email } = req.body;
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

XML數(shù)據(jù)（XML Data）

概述

XML（eXtensible Markup Language）是一種用于標(biāo)記數(shù)據(jù)的格式，常用于數(shù)據(jù)傳輸和存儲。在POST請求中，客戶端可以將數(shù)據(jù)作為XML文檔發(fā)送給服務(wù)器。

數(shù)據(jù)格式

請求的 Content-Type頭部應(yīng)設(shè)置為 application/xml，請求體中包含一個XML文檔，例如：

<user>
  <name>John Doe</name>
  <email>john.doe@example.com</email>
</user>

示例

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/xml'
  },
  body: `
    <user>
      <name>John Doe</name>
      <email>john.doe@example.com</email>
    </user>
  `
});

服務(wù)器處理

服務(wù)器端可以解析XML數(shù)據(jù)并進(jìn)行相應(yīng)的處理。以下是一個簡單的示例，展示了如何在Node.js中處理XML數(shù)據(jù)：

const express = require('express');
const xmlparser = require('express-xml-bodyparser');
const app = express();

app.use(xmlparser());

app.post('/submit', (req, res) => {
  const { user } = req.body;
  const name = user.name[0];
  const email = user.email[0];
  res.send(`Name: ${name}, Email: ${email}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

文件上傳（Multipart Form Data）

概述

文件上傳是一種常見的POST數(shù)據(jù)方式，特別適用于需要傳輸文件的場景。在這種方式下，數(shù)據(jù)以 multipart/form-data格式傳輸，數(shù)據(jù)被分割成多個部分，每個部分都有自己的頭部和內(nèi)容。

數(shù)據(jù)格式

請求的 Content-Type頭部應(yīng)設(shè)置為 multipart/form-data，請求體中的數(shù)據(jù)被分割成多個部分，每個部分都有自己的頭部和內(nèi)容，其中包括文件數(shù)據(jù)和其他表單字段的數(shù)據(jù)。

示例

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Upload">
</form>

服務(wù)器處理

服務(wù)器端可以解析請求體中的各個部分，獲取文件和其他字段的數(shù)據(jù)。以下是一個簡單的示例，展示了如何在Node.js中處理文件上傳：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send(`File uploaded: ${req.file.originalname}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

選擇適合的POST提交方式

在實(shí)際開發(fā)中，選擇適當(dāng)?shù)腜OST提交方式取決于具體的需求和數(shù)據(jù)類型。以下是一些建議：

表單提交：適用于簡單的表單數(shù)據(jù)傳輸，例如登錄、注冊等。
JSON數(shù)據(jù)：適用于復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)傳輸，特別是在前后端分離的Web應(yīng)用中。
XML數(shù)據(jù)：適用于需要兼容傳統(tǒng)系統(tǒng)或與使用XML的第三方服務(wù)進(jìn)行通信的場景。
文件上傳：適用于需要傳輸文件的場景，例如用戶頭像上傳、文檔上傳等。

總結(jié)

HTTP協(xié)議中的POST方法提供了多種數(shù)據(jù)提交方式，包括表單提交、JSON數(shù)據(jù)、XML數(shù)據(jù)和文件上傳。每種方式都有其適用的場景和優(yōu)勢。開發(fā)者可以根據(jù)具體需求選擇適當(dāng)?shù)姆绞竭M(jìn)行數(shù)據(jù)傳輸，確保高效、安全地與服務(wù)器進(jìn)行通信。

常見問題解答

提交POST請求時如何選擇合適的數(shù)據(jù)格式？

選擇數(shù)據(jù)格式應(yīng)根據(jù)數(shù)據(jù)的類型和復(fù)雜度。例如，簡單表單數(shù)據(jù)使用 application/x-www-form-urlencoded，復(fù)雜結(jié)構(gòu)化數(shù)據(jù)使用 application/json，需要傳輸文件時使用 multipart/form-data。

如何處理POST請求中的JSON數(shù)據(jù)？

在發(fā)送JSON數(shù)據(jù)的POST請求時，設(shè)置 Content-Type為 application/json，并將JSON對象作為請求體。服務(wù)器端可以使用相應(yīng)的解析器處理JSON數(shù)據(jù)。

表單提交和文件上傳的主要區(qū)別是什么？

表單提交通常用于傳輸簡單的鍵值對數(shù)據(jù)，而文件上傳使用 multipart/form-data格式，能夠傳輸文件和其他表單字段的數(shù)據(jù)。

為什么選擇POST方法而不是GET方法提交數(shù)據(jù)？

POST方法將數(shù)據(jù)包含在請求體中，更適合傳輸大量數(shù)據(jù)和敏感信息，而GET方法將數(shù)據(jù)附加在URL之后，不適合傳輸大數(shù)據(jù)或敏感信息。

如何確保POST請求的安全性？

使用HTTPS協(xié)議加密數(shù)據(jù)傳輸，避免明文傳輸數(shù)據(jù)。同時，可以通過驗(yàn)證請求來源、防止CSRF攻擊等措施提高安全性。

在Node.js中如何處理POST請求中的XML數(shù)據(jù)？

使用 express-xml-bodyparser中間件解析XML數(shù)據(jù)，將數(shù)據(jù)轉(zhuǎn)換為JSON格式，方便后續(xù)處理。

在線咨詢

上一篇：怎么制作HTML5頁面讓它適應(yīng)電腦和手機(jī)的尺寸？
下一篇：JavaScript錯誤處理完整指南

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

16.HTML 表單提交

基本結(jié)構(gòu)

輸入類型

文本輸入

數(shù)值輸入

日期和時間輸入

選擇輸入

特殊輸入

驗(yàn)證方法

必填字段

正則表達(dá)式

數(shù)值范圍

長度限制

表單提交

完整例子

結(jié)論

在開篇

盤點(diǎn)HTML表單基礎(chǔ)

1. from元素

2. 單選按鈕

3. 復(fù)選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫在最后

解HTTP協(xié)議中的POST方法：四種常用的提交數(shù)據(jù)方式

POST方法概述

表單提交（Form Data）

概述

數(shù)據(jù)格式

示例

服務(wù)器處理

JSON數(shù)據(jù)（JSON Data）

概述

數(shù)據(jù)格式

示例

服務(wù)器處理

XML數(shù)據(jù)（XML Data）

概述

數(shù)據(jù)格式

示例

服務(wù)器處理

文件上傳（Multipart Form Data）

概述

數(shù)據(jù)格式

示例

服務(wù)器處理

選擇適合的POST提交方式

總結(jié)

您的項(xiàng)目需求