Form 表單提交知識的總結（全）

前言： html 中的form元素被稱之為表單，form元素中的內容，包含有互動控制項，其目的是用來向web 伺服器提交資訊，實現前後端的互動目的。相關基礎內容參照form基礎知識文件 ,文章將會啟動乙個node 後台伺服器，對前端form 表單的各種場景以及後端對請求結果的響應做乙個歸納總結

我們通過express 來啟動後台服務，並且模擬兩個後台介面

const express = require('express')
const bodyparser = require('body-parser')
extended: false
}))  console.log(req.query)
res.send('成功接收')
})  console.log(req.body)
res.send('成功接收')
})  console.log('服務啟動')
})

form 表單通過method 的屬性來確定提交給後台的請求方式，兩者的基本用法如下

以下幾點需要特別注意

form 的提交行為需要通過type=submit實現

form 中的method 屬性不指定時， form 預設的提交方式為 get請求。

form 表單的提交後會有預設行為，會跳轉重新整理到action 的頁面

form 表單的提交方式，請求頭預設的content-type 為 x-www-form-urlencoded

當乙個form 表單內部，所有的input 中只有乙個 type='text' 的時候，enter 鍵會有預設的提交行為（注意前提條件）。

從前面可以知道，form 表單的提交會伴隨著跳轉到action中指定的url 鏈結，為了阻止這一行為，可以通過設定乙個隱藏的iframe 頁面，並將form 的target 屬性指向這個iframe，當前頁面iframe則不會重新整理頁面

js事件觸發表單提交，通過button、鏈結等觸發事件，js呼叫submit()方法提交表單資料，jquery通過submit()方法

// js
var btn = document.getelementbyid('btn')
var jsform = document.getelementbyid('jsform')
btn.onclick = function () 
// jquery
$('#jqbtn').click(function () )
})

說明：

通過指令碼提交行為依然存在跳轉新頁面重新整理的問題

指令碼中可以通過阻止預設行為來禁止頁面跳轉

$('#jqbtn').click(function () 
})})

注意事項：

通過ajax 請求模擬form 的提交需要注意 form 表單內不允許的存在，否則會和ajax 自身的請求相衝突

ajax 請求中，預設的content-type 為'formdata',可根據自己的需要修改

後台對不同的content-type 請求頭的處理如下

extended: false

}))ajax 請求需要處理跨域問題，而form 表單的預設提交不需要，原因是，原頁面用form 提交到另乙個網域名稱之後，原指令碼無法獲取響應的內容，所以瀏覽器認為這是安全的，而ajax 需要處理響應的內容，瀏覽器則認為這是一種跨域的行為

為了解決ajax 的跨域問題，需要在後台的**中加入跨域的處理

const cors = require("cors")
// 解決跨域

檔案的上傳，請求頭中content-type 的形式需要修改為multipart/form-data，相應的，只要將form的enctype 屬性修改為enctype="multipart/form-data"即可

後台處理部分，我們需要額外安裝formidable 依賴來解決form-data 格式的解析

const formidable = require('formidable')
const form = new formidable.incomingform();
form.parse(req, function (err, fields, files) )
})

form 表單前後端的處理彙總如上，詳細的**可以參考 github

Form 表單提交知識的總結（全）

form表單提交

form表單提交

Ajax提交form表單

Form 表單提交知識的總結（全）

form表單提交

form表單提交

Ajax提交form表單

相關推薦