form表單的前後端互動
建立資料夾。資料夾的命名中不能有漢字，否則會影響程式的執行。
右鍵工程資料夾，在終端開啟，輸入：npm init 一路回車，此時工程資料夾中會出現一個名為：package.json的檔案。
右鍵工程資料夾，新建一個名為：public的資料夾，在public資料夾的目錄下，建立一個名為index.html檔案，然後在工程資料夾下建立一個名為：index.js的檔案，至此，所有檔案建立完畢。
右鍵工程資料夾，在終端開啟，輸入命令：npm install express 下載依賴項，一會兒會用到，然後在終端中輸入命令：npm install multer，一會也會用到，這是個依賴項。至此，所有的檔案就已經全部建立完成，接下來就是程式碼實現功能的時刻了。
這個時候，工程檔案的列表所有檔案目錄如下圖所示：
在index.html資料夾中，建立一個按鈕：
程式碼如下：
<button onclick="form1()">xhr之form請求</button>
瀏覽器的顯示如下圖：
先來寫以form形式傳送的資料，程式碼如下：
<script>
function form1() {
var xhr = new XMLHttpRequest()
// 初始化一個form物件
var form = new FormData()
form.append('name', '張三')
form.append('age', '21')
form.append('fond', '玩耍')
// 建立post介面，
xhr.open('post', '/test')
// 傳送資料
xhr.send(form)
}
</script>
程式碼到此為止，已經以form的表單形式，並且以post的方法傳送給後端了。
接下來就是我們建立後端了。
// 固定寫法
var express = require('express')
var bodyParser = require('body-parser')
// 如果使用的是FormData這種資料提交方式的話
// 那麼需要multer裡面的array()方法進行資料剝離
var multer = require('multer')
var web = express()
var form = multer()
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))
// req是前端給後端傳送的資料時使用
// res是後端給前端傳送資料時使用
web.post('/test',form.array(),function(req,res){
name = req.body.name
age = req.body.age
fond = req.body.fond
//給前端傳送資料過去。
res.send('姓名是'+name+',年齡是'+age+',愛好是'+fond)
})
// 建立本地伺服器
web.listen('8080',function(){
console.log('伺服器啟動')
})
在上面的後端程式碼中，我們已經在後端接收了前端傳送過來的資料，並且在post方法中進行了處理：
web.post('/test',form.array(),function(req,res){
name = req.body.name
age = req.body.age
fond = req.body.fond
//給前端傳送資料過去。
res.send('姓名是'+name+',年齡是'+age+',愛好是'+fond)
})
通過res.send又將資料傳送給了前端，
這個時候，我們再進入前端的index.html檔案中，對後端傳送過來的資料進行接收，並且輸出出來，就完成了本次專案的所有目標：
以form表單的格式進行前後端資料的互動傳送。
前端接收後端處理過的資料的程式碼如下：
// 在xhr的準備狀態發生改變的時候，呼叫該方法
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
console.log(xhr.responseText)
}
}
if裡面的判斷語句是：當資料傳輸完成之後，具體解釋，在上一篇部落格中已經介紹的很詳細。
接下來，右鍵工程專案，在終端中開啟，然後輸入命令：node index 啟動伺服器。
這個“8080”是我們剛才以程式碼的形式建立的自己的本機伺服器。
// 建立本地伺服器
web.listen('8080',function(){
console.log('伺服器啟動')
})
然後我們可以看到瀏覽器的最終輸出結果：
至此，我們已經實現了form表單格式的前後端互相傳送資料，是不是沒有想的那麼難？
下附index.html檔案所有程式碼，也就是前端的程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form請求</title>
</head>
<body>
<button onclick="form1()">xhr之form請求</button>
<script>
function form1() {
var xhr = new XMLHttpRequest()
// 初始化一個form物件
var form = new FormData()
form.append('name', '張三')
form.append('age', '21')
form.append('fond', '玩耍')
// 建立post介面，
xhr.open('post', '/test')
// 傳送資料
xhr.send(form)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText)
}
}
}
</script>
</body>
</html>