前端數據提交給后端之HTML表單簡單剖析

在開篇

什么是表單呢？當前端想要提交數據給后端，怎么搞？那么在前端開發中，表單是常用的手段，比如常見的場景有：登錄框、賬號注冊頁、主機信息錄入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

在學習異步提交表單之前，先來學習幾個JQuery方法和屬性。

1、serialize()：序列表格內容為字符串。如下：

queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1

2、serializeArray()：序列化表格元素 (類似 ‘.serialize()’ 方法) 返回 JSON 數據結構數據。

注意，此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進行字符串化操作。

返回的JSON對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對——name參數和value參數（如果value不為空的話）。舉例來說：

[
 {
 "name": "firstname",
 "value": "Hello"
 },
 {
 "name": "lastname",
 "value": "World"
 },
 {
 "name": "alias"
 }
]

3、data屬性：發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉換為 “&foo=bar1&foo=bar2”。

4、dataType屬性：預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:

“xml”: 返回 XML 文檔，可用 jQuery 處理。“script”: 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了”cache”參數。”’注意：”’在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)。“json”: 返回 JSON 數據。“jsonp”: JSONP 格式。使用 JSONP 形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。“text”: 返回純文本字符串

一、ajax方式

<script type="text/javaScript">
　　 $.ajax({
 url:"mobileSurveyAction_addSurvey.action",//提交地址
 data:$("#form1").serialize(),//將表單數據序列化
 type:"POST",
 dataType:"json",
 success:function(result){
 if (result.success=='100'){
 $("#mySection").hide();
 $(".footer").hide();
 $("#alertMsg").show();
 }else{
 alert("失敗！");
 }
 }
 });
</script>

二、submit方式

有時在A頁面點擊按鈕彈出一個form表單，在填完表單后提交成功后，需要關閉表單頁并將表單中的某些值反應在A頁面上，這時就需要異步提交表單。其實也挺簡單，只是需要把表單數據序列化。

<script type="text/javaScript">
　　 $("#form1").submit(function (){
　　 var ajax_url="yourActionUrl"; //表單目標
　　 var ajax_type=$(this).attr('method'); //提交方法
　　 var ajax_data=$(this).serialize(); //表單數據
　　 $.ajax({
 　　 type:ajax_type, //表單提交類型
 　　 url:ajax_url, //表單提交目標
 　　 data:ajax_data, //表單數據
 　　 success:function(msg){
 　　 if(msg=='success'){//msg 是后臺調用action時，你傳過來的參數
 　　 //do things here
 　　 window.close();
 　　 }else{
 //do things here
 　　 }
 　　 }
　　 });
　　 //return false; //止表單的默認提交事件
 });
</script>

三、submit方式2

<html>
<head>
<script type="text/javaScript">
　　 jQuery(document).ready(function (){
　　 jQuery('#search_form').bind("submit", function(){
 　　 var key_word=jQuery("#keyword").val();
 　　 if(key_word==""){
 　　 return false;
 　　 }
 　　 var options={
 　　 url: '/portrait/user_info_display?user_info_keyword=' + key_word,
 　　 type: 'post',
 　　 dataType: 'text',
 　　 data: $("#search_form").serialize(),
 　　 success: function (data) {
 　　 if (data.length > 0){
 　　 jQuery("#user_info").html(data);
 　　 }
 　　 }
 　　 };
 　　 $.ajax(options);
 　　 return false;
　　 });
 　$('#search').click(function(){
 $('#search_form').submit();
 　　 });
　　});
</script>
</head>
<body>
 <form mothod="post" id="search_form">
 <div class="cf">
 <label class="search-bar">
 <input id="keyword" placeholder="請輸入搜索關鍵詞" name="user_info_keyword" type="text" value="" class="input-search">
 <a id="search" class="btn-search">
 <i class="icon-search"></i>
 </a>
 <a href="javascript：;" class="btn-more"></a>
 </label>
 </div>
 </form>
</body>
</html>

代碼完成了兩個功能：1.輸入關鍵詞后按回車，會向server發送一個POST請求，然后異步提交表單，刷新部分頁面；2.輸入關鍵詞后，點擊查詢按鈕，也可異步刷新部分頁面。

此時要注意表單提交后發送的是POST請求，而點擊按鈕會發送一個GET請求，所以我們可以通過jQuery，使得按鈕點擊時觸發表單提交，這樣后端就不用再寫代碼處理GET請求。

四、隱藏的iframe模擬異步上傳

為什么在這里說的是模擬呢?因為我們其實是將返回結果放在了一個隱藏的iframe中，所以才沒有使當前頁面跳轉，感覺就像是異步操作一樣。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-">
<title>隱藏的iframe上傳文件</title>
<script type="text/javascript" src="jquery路徑..."></script>
</head>
<body>
 <iframe name="frm" style="display: none"></iframe>
 <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
 <p id="upfile">
 附件：<input type="file" name="myfile" style="display: inline">
 </p>
 <p id="upbtn">
 <input style="padding-left: px; padding-right: px;" type="submit" value="異步上傳">
 <span id="uptxt" style="display: none">正在上傳...</span>
 </p>
 </form>
 <div id="flist" style="border: px dotted darkgray;"></div>
 <script>
 // 上傳完成后的回調
 function uploadFinished(fileName) {
 addToFlist(fileName);
 loading(false);
 }
 function addToFlist(fname) {
 var temp=["<p id='" + fname + "'>",fname,"<button onclick='delFile(\""+fname+"\");'>刪除</button>","</p>"];
 $("#flist").append(temp.join(""));
 }
 function loading(showloading) {
 if (showloading) {
 $("#uptxt").show();
 } else {
 $("#uptxt").hide();
 }
 }
 </script>
</body>
</html>

這種技術有兩個關鍵的地方:

form會指定target,提交的結果定向返回到隱藏的ifram中。(即form的target與iframe的name屬性一致)。
提交完成后，iframe中頁面與主頁面通信，通知上傳結果及服務端文件信息.

如何與主頁面通信呢?

我們用nodejs在接收完了文件后返回了一個window.parent.主頁面定義的方法，執行后可以得知文件上傳完成。代碼很簡單:

router.post('/upload', multipartMiddleware, function(req, res) {
 var fpath=req.files.myfile.path;
 var fname=fpath.substr(fpath.lastIndexOf('\\') + );
 setTimeout(function() {
 var ret=["<script>","window.parent.uploadFinished('"+fname+"');","</script>"];
 res.send(ret.join(""));
 }, );
});

五、使用XMLHttpRequest2來進行真正的異步上傳

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>xhr level 異步上傳</title>
<script type="text/javascript" src="jquery路徑..."></script>
</head>
<body>
<div>
 <p id="upfile">
 附件：<input type="file" id="myfile" style="display: inline">
 </p>
 <p id="upbtn">
 <input style="padding-left: px; padding-right: px;" type="button" value="異步上傳" onclick="upload();">
 <span id="uptxt" style="display: none">正在上傳...</span>
 <span id="upprog"></span>
 <button id="stopbtn" style="display: none;">停止上傳</button>
 </p>
</div>
<div id="flist" style="border: px dotted darkgray;"></div>
<script>
function upload() {
 // 準備FormData
 var fd=new FormData();
 fd.append("myfile", $("#myfile")[0].files[0]);
 // 創建xhr對象
 var xhr=new XMLHttpRequest();
 // 監聽狀態，實時響應
 // xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進度，xhr.upload.progress是上傳進度
 xhr.upload.onprogress=function(event) {
 if (event.lengthComputable) {
 var percent=Math.round(event.loaded / event.total);
 console.log('%d%', percent);
 $("#upprog").text(percent);
 }
 };
 // 傳輸開始
 xhr.onloadstart=function(event) {
 console.log('load start');
 $("#upprog").text('開始上傳');
 $("#stopbtn").one('click', function() {
 xhr.abort();
 $(this).hide();
 });
 loading(true);
 };
 // ajax過程成功完成事件
 xhr.onload=function(event) {
 console.log('load success');
 $("#upprog").text('上傳成功');
 console.log(xhr.responseText);
 var ret=JSON.parse(xhr.responseText);
 addToFlist(ret.fname);
 };
 // ajax過程發生錯誤事件
 xhr.onerror=function(event) {
 console.log('error');
 $("#upprog").text('發生錯誤');
 };
 // ajax被取消
 xhr.onabort=function(event) {
 console.log('abort');
 $("#upprog").text('操作被取消');
 };
 // loadend傳輸結束，不管成功失敗都會被觸發
 xhr.onloadend=function (event) {
 console.log('load end');
 loading(false);
 };
 // 發起ajax請求傳送數據
 xhr.open('POST', '/upload', true);
 xhr.send(fd);
}
function addToFlist(fname) {
 var temp=["<p id='" + fname + "'>",fname,"<button onclick='delFile(\"" + fname + "\");'>刪除</button>","</p>"];
 $("#flist").append(temp.join(""));
}
function delFile(fname) {
 console.log('to delete file: ' + fname);
 // TODO: 請實現
}
function loading(showloading) {
 if (showloading) {
 $("#uptxt").show();
 $("#stopbtn").show();
 } else {
 $("#uptxt").hide();
 $("#stopbtn").hide();
 }
}
</script>
</body>
</html>

代碼有點多，但是通俗易懂。使用過AJAX的人都知道，XHR對象提供了一個onreadystatechange的回調方法來監聽整個請求/響應過程。在XMLHttpRequest2級規范中又多了幾個進度事件。有以下6個事件:

1.loadstart: 在接收到響應數據的第一個字節時觸發。

2.progress: 在接收響應期間持續不斷地觸發。

3.error: 在請求發生錯誤時觸發。

4.abort: 在因為調用abort()方法而終止連接時觸發。

5.load: 在接收到完整的響應數據時觸發。

6.loadend: 在通信完成或者觸發error,abort,load事件后觸發。

這次我們可以解讀代碼:當傳輸事件開始后，我們便在停止傳送按鈕上添加點擊事件，內置了abort方法可以停止傳送。若不點則會正常上傳直到傳送完畢為止。其后臺代碼類似第二種方法。

六、使用jQuery和FormData來進行異步上傳

FormData的詳細介紹及使用請點擊此處，那里對FormData的方法和事件已經表述的非常清楚，這里就不再浪費時間在介紹一遍了。本文主要針對FormData對象的使用以及異步文件上傳進行詳細的說明。

FormData對象可以讓我們組織一個使用XMLHttpRequest對象發送的鍵值對的集合。它主要用于發送表單數據,但是可以獨立于使用表單傳輸的數據。

1、從頭開始創建一個FormData對象

你可以創建一個你自己的FormData對象，然后通過append() 方法向對象中添加鍵值對，就像下面這樣：

var formData=new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content='<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob=new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request=new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

注意：字段”userfile” 和 “webmasterfile” 都包含文件（file）。被分配到字段”accountnum”上的數字直接被FormData.append()方法轉換成了字符串（字段的值（value）可能是一個Blob, File, 或一個string：如果值既不是Blob也不是File，則值會被轉換成一個string）。

這個例子創建了一個FormData實例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest對象的send()方法去發送表單數據。字段”webmasterfile”是一個Blob。一個Blob對象代表一個文件對象的原始數據。但是Blob代表的數據不必須是javascript原生格式的數據。文件接口是基于Blob,繼承Blob功能和擴大它對用戶文件系統的支持。為了構建一個Blob可以調用Blob()構造函數。

2、從一個HTML表單獲得一個FormData對象

為了獲得一個包含已存在表單數據的FormData對象，在創建FormData對象的時候需要指定表單元素。

var formData=new FormData(someFormElement);

就像下面這樣：

var formElement=document.querySelector("form");
var request=new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

你也可以在獲得FormData對象之后增加另外的數據，就像下面這樣：

var formElement=document.querySelector("form");
var formData=new FormData(formElement);
var request=new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

這樣你可以在發送之前增加額外的信息，不一定是用戶編輯的。

3、使用FormData對象發送文件

你可以使用FormData發送文件。簡單的<form>中在包含一個<input>元素就可以：

<form enctype="multipart/form-data" method="post" name="fileinfo">
 <label>Your email address:</label>
 <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
 <label>Custom file label:</label>
 <input type="text" name="filelabel" size="12" maxlength="32" /><br />
 <label>File to stash:</label>
 <input type="file" name="file" required />
 <input type="submit" value="Stash the file!" />
</form>
<div></div>

然后你可以使用下面的代碼去發送：

var form=document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
 var oOutput=document.querySelector("div"),
 oData=new FormData(form);
 oData.append("CustomField", "This is some extra data");
 var oReq=new XMLHttpRequest();
 oReq.open("POST", "stash.php", true);
 oReq.onload=function(oEvent) {
 if (oReq.status==200) {
 oOutput.innerHTML="Uploaded!";
 } else {
 oOutput.innerHTML="Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
 }
 };
 oReq.send(oData);
 ev.preventDefault();
}, false);

你也可以直接向FormData對象中添加File或Blob，就像下面這樣：

data.append("myfile", myBlob, "filename.txt");

當使用append() 方法的時候，可能會使用到第三個參數去發送文件名稱（通過Content-Disposition頭發送到服務器）。如果沒有指定第三個參數或這個參數不被支持的話，第三個參數默認是”blob”。

如果你設置好正確的options，你也可以和jQuery配合起來使用：

解HTTP協議中的POST方法：四種常用的提交數據方式

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

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

云服務器，高防服務器就選藍易云，頭條搜索：藍易云

POST方法概述

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

表單提交（Form Data）

概述

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

數據格式

表單數據會被編碼為URL參數，例如：

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>

服務器處理

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

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數據（JSON Data）

概述

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

數據格式

請求的 Content-Type頭部應設置為 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'
  })
});

服務器處理

服務器端可以解析JSON數據并進行相應的處理。以下是一個簡單的示例，展示了如何在Node.js中處理JSON數據：

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數據（XML Data）

概述

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

數據格式

請求的 Content-Type頭部應設置為 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>
  `
});

服務器處理

服務器端可以解析XML數據并進行相應的處理。以下是一個簡單的示例，展示了如何在Node.js中處理XML數據：

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數據方式，特別適用于需要傳輸文件的場景。在這種方式下，數據以 multipart/form-data格式傳輸，數據被分割成多個部分，每個部分都有自己的頭部和內容。

數據格式

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

示例

<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>

服務器處理

服務器端可以解析請求體中的各個部分，獲取文件和其他字段的數據。以下是一個簡單的示例，展示了如何在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提交方式

在實際開發中，選擇適當的POST提交方式取決于具體的需求和數據類型。以下是一些建議：

表單提交：適用于簡單的表單數據傳輸，例如登錄、注冊等。
JSON數據：適用于復雜的結構化數據傳輸，特別是在前后端分離的Web應用中。
XML數據：適用于需要兼容傳統系統或與使用XML的第三方服務進行通信的場景。
文件上傳：適用于需要傳輸文件的場景，例如用戶頭像上傳、文檔上傳等。

總結

HTTP協議中的POST方法提供了多種數據提交方式，包括表單提交、JSON數據、XML數據和文件上傳。每種方式都有其適用的場景和優勢。開發者可以根據具體需求選擇適當的方式進行數據傳輸，確保高效、安全地與服務器進行通信。

常見問題解答

提交POST請求時如何選擇合適的數據格式？

選擇數據格式應根據數據的類型和復雜度。例如，簡單表單數據使用 application/x-www-form-urlencoded，復雜結構化數據使用 application/json，需要傳輸文件時使用 multipart/form-data。

如何處理POST請求中的JSON數據？

在發送JSON數據的POST請求時，設置 Content-Type為 application/json，并將JSON對象作為請求體。服務器端可以使用相應的解析器處理JSON數據。

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

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

為什么選擇POST方法而不是GET方法提交數據？

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

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

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

在Node.js中如何處理POST請求中的XML數據？

使用 express-xml-bodyparser中間件解析XML數據，將數據轉換為JSON格式，方便后續處理。

在線咨詢

上一篇：javascript 異常處理的一些經驗
下一篇：前端代碼Review，一次性掰扯明白！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端數據提交給后端之HTML表單簡單剖析

在開篇

盤點HTML表單基礎

1. from元素

2. 單選按鈕

3. 復選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫在最后

一、ajax方式

四、隱藏的iframe模擬異步上傳

六、使用jQuery和FormData來進行異步上傳

1、從頭開始創建一個FormData對象

2、從一個HTML表單獲得一個FormData對象

3、使用FormData對象發送文件

解HTTP協議中的POST方法：四種常用的提交數據方式

POST方法概述

表單提交（Form Data）

概述

數據格式

示例

服務器處理

JSON數據（JSON Data）

概述

數據格式

示例

服務器處理

XML數據（XML Data）

概述

數據格式

示例

服務器處理

文件上傳（Multipart Form Data）

概述

數據格式

示例

服務器處理

選擇適合的POST提交方式

總結

您的項目需求