当前位置: 首页>前端>正文

express设置请求返回json数据 express方法

express是基于nodejs的框架,当然,express也封装了对各种请求处理的方法,下面介绍一下get、post、ajax、jsonp请求的处理方法
1、处理get请求
//1.引入express框架
const express=require('express');
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
	console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//5.处理接口的响应
//5.1处理get请求
serve.get('/get',function(req,res){
	//req.query代表拿到的get请求携带的参数
	console.log('处理了get接口',req.query);
	//res.end()=res.write()+res.end()
	res.send('已经处理好了get请求');
})
2、处理post请求
//1.引入express框架
const express=require('express');
//5.2引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
	console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//4.2 使用中间件
serve.use(bodyParser())
//5.2处理post请求
serve.post('/post',function(req,res){
	//此时会发现拿不到post请求的参数
	// console.log("处理了post请求....",req.body)
	//需要引入中间件body-parser
	//引入并使用后再次打印post请求的数据
	console.log(req.method,req.body)
	res.send('已经处理好了post请求')
})
3、处理动态请求
//1.引入express框架
const express=require('express');
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
	console.log('正在监听端口5555.....')
})
//4.资源托管
serve.use(express.static('./public'))
//5.3 处理动态接口,处理所有id不同的接口,形如http://localhost:5555/all/id=3 http://localhost:5555/all/id=4
serve.get('/all/:id',function(req,res){
	console.log('处理动态接口...',req.params.id)
	res.end()
})
4、处理ajax请求

首先准备一个html文件发送一个ajax请求
(1)自己封装的发送ajax请求的函数

//url,data,type,timeout,success,error
function ajax(options){
	//-1  整理options
	options=options||{};
	options.data=options.data||{};
	options.timeout=options.timeout||0;
	options.type=options.type||'get';
	//0 整理data
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join('&');
	//1	创建ajax对象
	if(window.XMLHttpRequest){
		var oAjax=new XMLHttpRequest();//[object XMLHttpRequest]
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP')
	}
	if(options.type=='get'){
		//2.
		oAjax.open('get',options.url+'?'+str,true);
		//3.
		oAjax.send();
	}else{
		//2.
		oAjax.open('post',options.url,true);
		//设置请求头
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		oAjax.send(str);//身子
	}
	//3.5	超时
	if(options.timeout){
		var timer=setTimeout(function(){
			alert('超时了');
			oAjax.abort();//中断ajax请求	
		},options.timeout);
	}
	//4.
	oAjax.onreadystatechange=function(){//当准备状态改变时
		if(oAjax.readyState==4){//成功失败都会有4
			clearTimeout(timer);
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				options.success && options.success(oAjax.responseText);
			}else{
				options.error && options.error(oAjax.status);//http	0
			}
		}
	};
};

(2)新建一个发送ajax请求的html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入封装的ajax请求 -->
		<script src="public/js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
			// 1.发送一个ajax请求
			ajax({
				url:"http://localhost:5555/ajax",
				data:{a:1,b:2,c:3},
				success:data=>{
					console.log("获取到的ajax请求返回的数据",data)
				}
			})	
		}
		</script>
	</body>
</html>

(3)新建处理ajax请求的js文件

//1.引入express框架
const express=require('express');
//5.1引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
	console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//4.2 使用中间件
serve.use(bodyParser())

//5.处理接口的响应
//5.1 处理ajax请求
serve.get("/ajax",(req,res)=>{
    console.log("ajax请求的响应",req.query,req.body)
    res.send('获取到了ajax请求的携带来的数据了')
})
5、处理jsonp请求

(1)封装一个jsonp请求的函数

//options url,data,timeout,success,error
function jsonp(options){
	
	options = options || {};
	if(!options.url){
		return;
	}
	options.data = options.data || {};
	options.cbName = options.cbName || "callback";
	options.timeout = options.timeout || 0;
	
	var fnName = "jsonp_"+ Math.random();
	fnName = fnName.replace("." ,"");
	options.data[options.cbName] = fnName;
	var arr = [];
	for(var i in options.data){
		arr.push(i + "=" + encodeURIComponent(options.data[i]));
	}
	var str = arr.join("&");
	window[fnName] = function (json){
		options.success && options.success(json);
		clearTimeout(timer);
		oHead.removeChild(oS);
		window[fnName] = null;
	}	
	var oS = document.createElement("script");
	oS.src = options.url + "?" + str;
	var oHead = document.getElementsByTagName("head")[0];
	oHead.appendChild(oS);
	if(options.timeout){
		var timer = setTimeout(function(){
			options.error && options.error();
			//window[fnName] = null;
			window[fnName] = function(){};
		},options.timeout);
	}
}

(2)新建一个发送jsonp的HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入封装jsonp请求的函数 -->
		<script src="public/js/jsonp.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
			//.发送一个jsonp请求
			jsonp({
				url:"http://localhost:5555/jsonp",
				data:{a:200,b:300},
				success:(data)=>{
					console.log("获取了后端传送回来的数据",data)
				}
			})
		}
		</script>
	</body>
</html>

(3)新建处理jsonp请求的js文件

//1.引入express框架
const express=require('express');
//5.1引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
	console.log('正在监听端口5555.....')
})
//4.资源托管
serve.use(express.static('./public'))
//5. 处理jsonp请求
serve.get("/jsonp",(req,res)=>{
    console.log("jsonp请求的响应",req.query)
    res.send('获取到了jsonp请求的携带来的数据了')
})

文中有不足或错误之处,请大家指正哦!嘿嘿!!!



https://www.xamrdz.com/web/2pw1960072.html

相关文章: