Ajax--formData表单对象的使用方法

 1 DOCTYPE html>
 2 html>
 3 head>
 4     meta charset="utf-8">
 5     title>05FormData对象的使用方法.htmltitle>
 6 head>
 7 body>
 8 
 9     form id="form">
10         input type="text" name="username">
11         input type="password" name="password">
12         input type="button" id="btnOk" value="提交">
13     form>
14 
15     script type="text/javascript">
16         //获取按钮
17         var btn=document.getElementById(‘btnOk‘);
18         //获取表单
19         var form=document.getElementById(‘form‘);
20         //为按钮添加点击事件
21         btn.onclick = function(){
22             //将普通的html表单转换为表单对象
23          var formData= new FormData(form);
24             //提交表单对象
25             var xhr=new XMLHttpRequest();
26             xhr.open(‘post‘,‘http://localhost:3000/formData‘);
27             xhr.send(formData);
28             xhr.onload=function(){
29                 if(xhr.status==200){
30                     console.log(xhr.responseText);
31                 }    
32             }
33         }
34     script>
35 body>
36 html>

 1 const express=require(‘express‘)
 2 const path=require(‘path‘)
 3 const formidable=require(‘formidable‘);
 4 const app=express();
 5 app.use(express.static(path.join(__dirname,‘public‘)))
 6 app.post(‘/formData‘,(req,res)=>{
 7     //创建formidable表单解析对象
 8     const form=new formidable.IncomingForm();
 9     //解析客户端传递过来的FormData对象
10     form.parse(req,(err,fields,files)=>{
11         res.send(fields);
12     })
13 })
14 app.listen(3000)
15 console.log(‘服务器启动成功‘)