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

最新推荐文章于 2024-05-26 20:07:01 发布

__师寇__

最新推荐文章于 2024-05-26 20:07:01 发布

阅读量2.1w

点赞数 5

分类专栏： nodejs 文章标签： express ajax nodejs post

本文链接：https://blog.csdn.net/weixin_38283159/article/details/77913724

版权

nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提供两种常用方法
一，利用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>
		<!--这个显示有问题onclick显示不出-->
		<input type="button"  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 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=JSON.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>
		<!--这个显示有问题onclick显示不出-->
		<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');

运行结果和一相同