EXPRESS处理常见请求的方法

最新推荐文章于 2024-07-06 11:04:56 发布
最新推荐文章于 2024-07-06 11:04:56 发布
阅读量1.2k 收藏 4
点赞数
文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46212240/article/details/104805708
版权
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请求的携带来的数据了')
})

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

来杯仙气儿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超简express写四种请求
qq_46258465的博客
08-26 1095
使用express写四种请求 在项目根目录下创建一个 routes 文件夹，然后在里边新建一个 app.js 文件，在里边我们导入 express 然后创建一个 Router()实例，用于处理子路由： get 编写脚本 const express = require("express"); const app = express(); // 端口号，loclahost代表本机地址 const port = 3000; // 添加express中间件服务 // 作用可以帮助我们添加一些请求以及相应前的操作 a
express---处理请求
baidu_14821237的博客
11-12 801
express—处理请求1. 搭建一个app应用var express = require('express'); var app = express();2. 请求处理响应 GET请求 /*path:只需一级路径*/ app.get(path,(req,res) => { /*获取请求参数,获取到的是一个对象*/ console.log(req.que
express服务器端解决options预检请求
最新发布
asusaltecsrs的专栏
07-06 216
编写中间件代码如下：next();});
Express请求处理
weixin_47505105的博客
03-02 528
1. express构建模块化路由 2. Get参数的获取 3. Post参数的获取 4.关于express.urlencode([option])的extended参数解释
前后端交互之Express请求处理知识点
qq_38294099的博客
01-04 575
Express请求处理Express框架基础Express框架是什么Express框架特性中间件什么是中间件app.use中间件用法中间件应用错误处理中间件捕获错误Express请求处理构建模块化路由 Express框架基础 Express框架是什么 Express是基于Node平台的web应用开发框架，创建各种Web应用。 使用npm install express 下载 Express框架特性 提供简洁的路由定义方式 对获取HTTP请求参数进行简化处理 对模板引擎支持程度高 提供中间件机制有效控制H
express中间件当做前端服务器的安全漏洞处理
02-27
本篇文章将深入探讨Express中间件中可能存在的安全问题，并提供一些处理这些问题的方法。 一、Express中间件的理解与使用 Express中间件是一种函数，它接收请求对象(req)、响应对象(res)以及下一个中间件的函数...
express get使用方式
07-20
在HTTP协议中，GET是最常见的请求方法之一，用于从服务器获取资源。当用户在浏览器中输入一个URL或者点击链接时，实际上就是向服务器发送了一个GET请求。GET请求的特点是安全性和幂等性： - **安全性**：GET请求不...
Node.js Express 框架 POST方法详解
12-23
在本篇关于“Node.js Express框架POST方法详解”的内容中，我们将深入探讨如何使用Express处理HTTP请求中的POST方法，特别是在处理表单提交时的情况。 首先，POST方法是HTTP协议中的一个方法，用于向服务器发送数据...
webpack结合express实现自动刷新的方法
10-17
在现代Web开发中，Webpack 和 Express 的组合是一个常见的选择，特别是在构建全栈应用时。Webpack 是一个强大的模块打包工具，可以处理JavaScript、CSS、图片等资源，并将其转换为适合浏览器加载的形式。Express 是...
Express的路由详解
09-03
Express提供了与HTTP请求方法相对应的多种路由方法，包括`get`、`post`、`put`、`delete`等，以及一些不常见的如`options`、`head`等。例如，`app.post('/', ...)` 创建了一个处理POST请求到主页的路由。对于那些不...
express 请求方式(常用) / 不完整请求路径
m0_61382303的博客
01-12 672
express 请求方式(常用) get 获取信息请求 post post处理请求 put 编辑信息的请求 (用的不多) delete 删除信息的请求 不完整请求路径 ? 匹配0次或者1次 ( ' ab?cd' ) 可 abcd / acd * 匹配其他1次或者多次 ( ' ab*cd' ) 可 abcd / abbbbasdasdbbcd + 匹配1次或者多次 ( ' ab*cd' ) 可 abcd / abbbbbc...
【Express.js】处理请求数据
m0_51810668的博客
06-18 1993
本节将具体介绍express后端处理请求源携带数据的一些方法和技巧。
express请求参数的所有方式 (我所知道的 ，欢迎补充)
大青虫的博客
08-13 415
node（express）获取参数的所有方式 ， 望各位用轮子用的舒服
express(请求处理)
weixin_43713835的博客
10-19 426
3。请求处理
express学习_5.express请求对象
欢迎
08-28 207
1：什么是请求对象     请求对象是指客户端向服务器端发送数据的对象，包含请求头和请求主题 2：请求对象的方法          a: req.query方法    //接收get方法传的值         如：http://localhost:3000/member/detail.html?id=1000             var id = req.query.id; // =&gt;...
Express の Get 请求
broken_promise的博客
09-25 541
记给自己的 Express 的 Get 请求 上一篇文章是 Express 的 Hello World。这里我们来看看如何在 Express 中处理 Get 请求。 一般操作 一般操作，从上次没有说到的request对象入手（下面的内容删除了关于cookie的部门，希望我有机会能专门学习cookie吧）。 app.get('/index', function (req, res) { console.log(JSON.stringify(req.app === app, null, 2)); // tr
Express的请求和响应对象，客户端（通常是浏览器）是如何向服务器请求一个页面
m0_56132701的博客
06-30 664
在用 Express 构建 Web 服务器时，大部分工作都是从请求对象开始，到响应对象终止。这两个对象起源于 Node，Express 对其进行了扩展。在深入探讨这两个对象之前，我们先了解一点背景知识，看看客户端（通常是浏览器）是如何向服务器请求一个页面，以及页面是如何返回的。
GET与POST请求处理方法实现
06-09
其中，`@app.route`用于指定请求的URL路径和请求方法，`request`是包含请求信息的对象，`make_response`是用于发送响应的函数。 无论使用哪种框架和语言，我们都需要在处理请求时考虑安全性和可靠性。例如，对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值