CNode

客户端使用FormData()封装表单后,后台使用Body-parser中间件,req.body里并没有表单中的数据。

问答
Ffatbone008发布于10 年前最后回复10 年前0 回复5230 浏览0 收藏

前台页面代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
  	  function submitData(){
  		  var form=document.getElementById('form1');
  		  var formData=new FormData(form);
  		  var xhr=new XMLHttpRequest();
  		  xhr.open('POST','14-23.html',true);
  		  xhr.onload=function(e){
  			  if(status=200){
  				  document.getElementById('result').innerHTML=this.response;
  			  }
  		  };
  		  xhr.send(formData);
  	  }
    </script>
</head>
<body>
<form id="form1">
    姓:<input id="txtFirstName" name="firstname" type="text" value="陈">
    名: <input type="text" id="txtUserName" name="username" value="贻辉">
    <input type="button" value="提交" onclick="submitData();">
</form>
<output id="result"></output>
</body>
</html>

后台代码: /**

  • Created by chenyihui on 16/3/14. */
 var express=require('express');
 var fs=require('fs');
 var app=express();
 var bodyParser=require('body-parser');
 var mongo=require('mongodb');
 var server=mongo.Server('localhost','27017',{auto_reconnect:true})
 var db=mongo.Db('node-mongo-example',server,{safe:true});
 
 app.use(bodyParser.urlencoded({extended:false}));
 app.use(bodyParser.json());
 
 
 app.get('/14-23.html',function(req,res){
     res.sendFile(__dirname+'/14-23.html');
 });
 app.post('/14-23.html',function(req,res){
     db.open(function(err,db){
   	  if(err) console.log('数据库链接成功');
   	  else{
   		  var str;
   		  db.collection('users', function (err,collection) {
   			  collection.insert({'username':req.body.username,'firstname':req.body.firstname},function(err,docs){
   				  if(err) var str='数据库插入数据失败';
   				  else{
   					  str='数据插入成功:'+docs;
   				  }
   				  db.close();
   				  res.send(str);
   			  });
   		  })
   	  }
     });
 });
 app.listen(1337,'127.0.0.1');

req.body.username和req.body.firstname都为null req.body这个对象倒是存在。 我试过不使用FormData(),而只将form里的button改为sumbit,加个post方法,直接提交,就可以接收到这两个数据。 求大神指导,是formData的问题吗?

查看回复

回复 (0)

暂无回复,成为第一个参与讨论的人。
参与回复
登录后即可参与回复。登录