创建文件夹。文件夹的命名中不能有汉字，否则会影响程序的运行。
右键工程文件夹，在终端打开，输入：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里面的判断语句是：当数据传输完成之后，具体解释，在上一篇博客中已经介绍的很详细。
链接如下：https://blog.csdn.net/qq_39138295/article/details/82226278
接下来，右键工程项目，在终端中打开，然后输入命令：node index 启动服务器。
打开浏览器，网址输入：http://localhost:8080/
这个“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>