数据到服务器使用节点和javascript
Data to server using node and javascript
我的页面上有表单
<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。
相关文章:
- 将DOM节点值与字符串Javascript进行比较
- 选择<李>使用普通JavaScript的子节点,而不是孙节点
- JavaScript选择器:查找包含具有特定属性的子体的节点
- Javascript,将文本添加到具有现有文本节点的元素中
- 节点,express应用程序返回text/javascript响应头(Content-Type),尽管设置了applic
- 使用TreeWalker检索非Javascript文本节点
- 如何使用javascript操作SVG节点,使其在MS Edge中工作
- 使用jQuery+Javascript识别一个空文本节点
- Protocol Buffers byte[] 数组到节点 Javascript 缓冲区
- 使用节点javascript的意外令牌ILLEGAL
- 获取特定类型的第一个子节点-JavaScript
- 嵌入式节点/javascript沙箱
- 节点JavaScript-十进制字符串到整数
- 删除特定的xml节点Javascript
- MySQL格式的节点JavaScript时间戳
- 计算节点/ JavaScript MySQL回调中的错误实例
- 节俭节点javascript命名空间
- 获取对象节点javascript的值
- 节点JavaScript上下文共享内置原型
- 子节点的子节点Javascript DOM