Ajax基础到实战（四）——formData对象_ajax formdata

// 路径处理模块
const path = require(‘path’);
const formidable = require(‘formidable’);
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, ‘public’)));
app.post(‘/formData’, (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
res.send(fields);
});
});

注意上面引入了 formidable 模块来解析 formData 对象表单数据。


在浏览器中输入：

http://localhost:3000/05.formData表单的使用方法.html

在表单中填入信息，点击提交按钮，可以看到浏览器控制台输出了表单中的信息，也即post请求的参数，而且是以对象的形式输出的。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201029194529972.png#pic_center)


### 3. formData对象实例方法


1. 获取表单对象中的属性值

formData.get(‘key’)

在 xhr.onclick中添加上述代码


06.formData对象实例方法.html

<script>

// 获取按钮
var btn = document.getElementById(‘btn’);
// 获取表单
var form = document.getElementById(‘form’);
// 为按钮添加点击事件
btn.onclick = function () {
// 将普通的html表单转换为表单对象
var formData = new FormData(form);
// get(‘key’) 获取表单对象属性的值
console.log(formData.get(‘username’));

// 创建ajax对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
xhr.open(‘post’, ‘http://localhost:3000/formData’);
// 发送ajax请求
xhr.send(formData);
// 监听xhr对象下的onload事件
xhr.onload = function () {
// 对象http状态码进行判断
if (xhr.status == 200) {
console.log(xhr.responseText);
}

}
}

最终可以在浏览器中看到username属性的属性值


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201029200250600.png#pic_center)


2. 设置表单对象中的属性值

formData.set(‘key’, ‘value’)

在上述代码的基础上添加一行代码：

console.log(formData.get(‘username’));
formData.set(‘username’, ‘itcast’);

最终可以看到 username 的属性值被设置为了 itcast，无论用户在表单中输入的值是什么最终都是 itcast


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020102920111