数据到服务器使用节点和javascript

Data to server using node and javascript

本文关键字：节点 javascript 服务器 数据      更新时间：2023-09-26

我的页面上有表单

    <form method="post" action="/data" onsubmit="return postData()">      
      <input type="password" name="passwd" placeholder="Password">     
      <input type="text" name ="name" placeholder="UserName">
      <input type="submit" class="btn btn-warning" value="Submit"/>
  </form>
function postData(){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  
    var req = new XMLHttpRequest();
    req.open('POST' , form.action , true);
    req.send(JSON.stringify(data));
}

和我的服务器

var express = require("express");
var app     = express();

app.get('/' , function( req, res ){
    res.sendfile("index.html");
})

app.post('/',function( req , res){
    console.log('got data ', req.body)
})
app.listen(8080)

它在post上打印"got data"，但它总是为req写undefined。我发送的数据应该存储在哪里，为什么这个抛出是未定义的?

您需要使用body-parser模块

与

安装

$ npm install body-parser

然后，将应用程序更改为

var express = require("express");
var app     = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.get('/' , function( req, res ){
    res.sendfile("index.html");
})
app.post('/',function( req , res){
    console.log('got data ', req.body)
})
app.listen(8080)

在Chrome, MSIE, Firefox中输入数据阅读器代码没有问题，但是您忘记添加return false;，因此您的代码将被Chrome和MSIE导航。

<form method="post" action="/data" onsubmit="return postData()">      
  <input type="password" name="passwd" placeholder="Password">     
  <input type="text" name ="name" placeholder="UserName">
  <input type="submit" class="btn btn-warning" value="Submit"/>
</form>
<script>
function postData(e){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  
    console.log(form.action, JSON.stringify(data))
    return false;
}
</script>

您也没有content-type标头。

    <form method="post" action="/data" onsubmit="return postData()" enctype="application/x-www-form-urlencoded">      
      <input type="password" name="passwd" placeholder="Password">     
      <input type="text" name ="name" placeholder="UserName">
      <input type="submit" class="btn btn-warning" value="Submit"/>
  </form>
function postData(){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  
    var req = new XMLHttpRequest();
    req.open('POST' , form.action , true);
    req.setRequestHeader("content-type", "text/json");
    req.send(JSON.stringify(data));
}

仍然不能使用express。至少根据这个https://stackoverflow.com/a/9931478/607033，您需要编写一个自定义中间件来访问主体内容。我没有时间进一步研究，Alex是对的，您应该使用bodyParser。

相关文章：