express框架：urlencode数据的处理

loggers_kid

已于 2025-02-03 10:53:02 修改

阅读量757

点赞数 8

文章标签： express

于 2024-01-12 17:22:42 首次发布

本文链接：https://blog.csdn.net/loggers_kid/article/details/135556516

版权

本文介绍了如何在Express应用中使用`express.urlencoded()`或`bodyParser.urlencoded()`处理来自form表单的urlencode数据，以及如何在axios请求中设置Content-Type发送这种格式的数据。同时提到在实际开发中可能对数据进行预处理的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：

在大多数网页中，urlencoded是最常见的请求方式，可以直接将参数编码后放到url中。但是很多人不知道的是 urlencoded同样可以将请求参数放到 body中，使用 post发送。如果使用这种方式发送，那么服务器中就需要使用数据解析的中间件来进行解析，如果是普通的 get请求就不需要考虑这些。

express解析urlencode类型的数据使用express.urlencoded()组件或bodyParser.urlencoded()组件

这两种组件效果一样，原因是express内部就是使用的bodyParser的解析方法。

服务器代码：

const express = require('express')
const app = express()

app.use(express.urlencoded({extended: false}))

app.post("/test", ( req, res)=>{
	console.log(req.body)
	res.send("测试成功！")
})

app.listen('8081','127.0.0.1',()=>{
    console.log("http://localhost:8081")
})

urlencode的数据结构是用 “=” 代替键值对，并且使用 “&” 连接不同数据 。所以发送数据时，需要将对象转换一下。这里使用的是 querystring 进行转化的，也可以使用其他方法，例如 URLSearchParams 对象，只要将数据转化成 a1=123&a2=456 这种形式的数据就可以。

请求一般会将参数放到 url后面使用“?”进行连接，比如get请求；但是如果是 post请求，可以发送普通对象，也可以经 urlencoded转化后再发送。两种方式都可以解析。

请求程序：

const axios = require("axios")
const querystring = require('querystring')

let base_url = "http://localhost:8081"
function postUrlencode( url, params){
	axios({
		method: "post",
		url: base_url + url,
		headers: {
		  "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
		},
		data:params,
	}).then( function(res){
		console.log( res.data)
	})
}

postUrlencode( "/test", querystring.stringify({a1:"你好",a2:"server"}) )

能够正常响应，服务器打印 { a1: '你好', a2: 'server' } 。

urlenode 类型的数据实际使用场景是 form 表单中。例如以下程序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://localhost:8081/test" method="post">
			<label for="name">名称：</label><br/>
			<input type="text" id="name" name="name"><br/><br/>
			
			<label for="email">邮件地址：</label><br/>
			<input type="email" id="email" name="email"><br/><br/>
			
			<button type="submit">提交</button>
		</form>
	</body>
</html>

也就是说点击 form 表单中的提交按钮之后，浏览器会自动将input 标签中的数据拼接成等号键值对的形式，这种格式也是常见 get 请求放在请求头中的数据格式。

但是常见的开发场景中，发送数据之前，都会对数据进行一些处理，例如校验或者一些数据的转化，所以form 表单直接提交数据会受实际开发需求的限制。