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

末蓝、 2022-06-08 00:37 294阅读 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>
    		
    		<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)

运行结果  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
二、利用中间件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');

运行结果和 一 相同

[SouthEast]: /images/20220608/21ce7405faa44fbbaaadc943a8682bbf.png
[SouthEast 1]: /images/20220608/5290364a2c10443ca126bb93811d7767.png
[SouthEast 2]: /images/20220608/f95bc9766fe34982a7e34243d17cb7a5.png