上一篇我们用post 和get 进行前后端数据传递,我们也可以用form 直接传递,下面以一个index.html 和index.js 文件为例,
来说明其用法,其他过程参考上一篇文章
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>Document</title>
</head>
<body>
<button onclick="form1()"> form 表</button>
<script>
function form1() {
var xhr = new XMLHttpRequest()
var form = new FormData()
form.append('name', '玉郎')
form.append('age', '18')
form.append('fond', '玩')
xhr.open('post', '/test')
xhr.send(form)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(xhr.responseText)
}
}
}
</script>
</body>
</html>
js 文件:(multer 可能需要nmp install multer 安装一次)
var express = require('express')
var bodyParser = require('body-parser')
var multer = require('multer')
var web = express()
var form = multer()
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))
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('服务器启动')
})
index.js 写入文件:
var fs = require('fs')
var info = {
name: '三三',
age: '18',
fond: '玩'
}
// 将json 文件转为 字符串
var infoString = JSON.stringify(info)
// writeFile 后面跟三个值:
// 1. 写入文件的路径
// 2. 写入的内容
// 3. 写入以后的回调函数
fs.writeFile('data/info.txt', infoString, function(err){
if(err){
console.log('写入失败')
}
else{
console.log('成功')
}
})
// readFile 里面两个参数:
// 参数1: 读取的文件的路径
// 参数2: 读取文件以后的回调函数
// 回调函数里面有两个参数:
// 参数1: 读取失败以后的信息
// 参数2: 读取成功以后的信息
fs.readSync('data/info.txt', function(err,data){
if(err){
console.log('读取失败')
}
else{
console.log('读取成功')
console.log(JSON.parse(data))
}
}
)