您的位置：首页 > Web前端 > Node.js

Nodejs express获取Ajax（post方式）发送的数据

2017-09-09 11:12 465 查看

提供两种常用方法

一，利用req.on(‘data’,function(data){})读取发送至服务端数据内容

前端代码(index.html)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" >
名称：<input type="text" name='name'/><br>
密码：<input type="password" name='password' /><br>
<input type="button" onclick=''/>
</form>
<p id='msg'></p>
<script type="text/javascript">
function Ajax(json){
var url=json.url;
var method=json.method;
var success=json.success;
var obj=json.obj;
var request=null;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
try{
request=new ActiveObject('Microsoft.XMLHTTP');
}
catch(faild){
alert('Error:Ajax request faild');
}
}
if(request!=null){
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var text=request.responseText;
success(text);
}else{
}
}
request.open(method,url,true);
request.send(JSON.stringify(obj));
}
}
function post=function(){
obj={
name:document.getElementsByName('name')[0].value,
password:document.getElementsByName('password')[0].value
};
Ajax({
url:'/',
method:'POST',
success:function(text){
document.getElementById('msg').innerText=text;
},
obj:obj
})
}
</script>
</body>
</html>

nodejs代码(app.js)

var express=require('express');
var app=express();
app.get('/',function(req,res){
res.sendfile(__dirname+'/index.html')
})
app.post('/',function(req,res){
req.on('data',function(data){
obj=JAON.parse(data);
console.log(obj);
res.send('数据已接收')
})
})
app.listion(3000,'localhost');

运行结果

二、利用中间件bodyParser

前端代码（index.html）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" id='form'>
名称：<input type="text" name='name'/><br>
密码：<input type="password" name='password' /><br>
<input type="button" value='确定' onclick='post()'/>
</form>
<p id='msg'></p>
<script type="text/javascript">
function Ajax(json){
var url=json.url;
var method=json.method;
var success=json.success;
var formData=json.formData;
var request=null;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
try{
request=new ActiveObject('Microsoft.XMLHTTP');
}
catch(faild){
alert('Error:Ajax request faild');
}
}
if(request!=null){
request.onreadystatechange=function(){
console.log(request.readyState)
if(request.readyState==4&&request.status==200){
var text=request.responseText;
success(text);
}else{
}
}
request.open(method,url,true);
request.send(formData);
}
}
function post(){
var formData=new FormData(document.getElementById('form'))
Ajax({
url:'/',
method:'POST',
success:function(text){
document.getElementById('msg').innerText=text;
},
formData:formData
})
}
</script>
</body>
</html>

nodejs代码（app.js）

var express=require('express');
var app=express();
app.use(express.bodyParser())//解析请求的body中的内容[必须]
app.get('/',function(req,res){
res.sendfile(__dirname+'/index.html')
})
app.post('/',function(req,res){
console.log(req.body);
res.send('数据已接收')
})
app.listen(3000,'localhost');

运行结果和一相同

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： express ajax nodejs post

相关文章推荐

新的分享

章节导航