nodejs接收post请求参数
原文 https://blog.csdn.net/u013263917/article/details/78682270#1.2
nodejs接收post请求参数
1.1-浏览器发送post请求参数的方式
1.2-服务端接收post请求参数的方式
post请求参数不直接在url路径中拼接，而是放在请求体中发送给服务器
请求三要素：请求行、请求头、请求体
1.1-浏览器发送post请求参数的方式
post请求参数不能直接在url路径中拼接，所以一般使用ajax请求来发送post请求参数
通常都是提交form表单数据使用post请求
<script>
//浏览器中一般使用ajax来发送post请求
$('#form').on('sunmit', function (e) {
//禁用表单默认提交事件
e.preventDefault();
$.ajax({
url: 'heroAdd',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
}
});
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hero - Admin</title>
<!-- 导入jquery -->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<!-- bootstrap布局 -->
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<style>
.hero-list img {
width: 50px;
}
</style>
</head>
<body>
<header>
<div class="page-header container">
<h1>
<a href="/">王者荣耀</a>
<small>英雄管理器</small>
</h1>
</div>
</header>
<div class="container hero-list">
<form id="form">
<div class="form-group">
<label for="exampleInputEmail1">英雄名称</label>
<input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="请输入英雄名称">
</div>
<div class="form-group">
<label for="exampleInputPassword1">英雄性别</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="optionsRadios1" value="男" checked>男
</label>
<label>
<input type="radio" name="gender" id="optionsRadios1" value="女" checked>女
</label>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">英雄图片</label>
<!-- <input type="file" id="exampleInputFile"> -->
<p class="help-block">请上传英雄图片.</p>
</div>
<button type="submit" class="btn btn-success">点击保存</button>
</form>
</div>
</body>
<script>
//浏览器中一般使用ajax来发送post请求
$('#form').on('sunmit', function (e) {
//禁用表单默认提交事件
e.preventDefault();
$.ajax({
url: 'heroAdd',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
}
});
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
1.2-服务端接收post请求参数的方式
与get请求不同的是，服务端接收post请求参数不是一次就可以获取的，通常需要多次
一般post请求发送的参数数据要比get请求大得多
1.服务端接收表单数据流程
（1）如果表单数据量越多，则发送的次数越多，如果比较少，可能一次就发过来了
（2）接收表单数据的时候，需要通过监听 req 对象的 data 事件来取数据
(3)每当收到一段表单提交过来的数据，req 的 data 事件就会被触发一次，同时通过回调函数可以拿到该 段 的数据
服务端需要自己添加数据流
(4)当接收表单提交的数据完毕之后，会执行req的 on 事件
2.服务端处理表单数据的逻辑流程
（1）对数据进行解码（中文数据提交时会进行url编码）
decodeURI(data)
（2）使用querystring对url进行反序列化（解析url将&和=拆分成键值对），得到一个对象
querystring是nodejs内置的一个专用于处理url的模块，API只有四个，详情见nodejs官方文档
post请求参数不能使用url模块解析，因为他不是一个url，而是一个请求体对象
（3）将数据插入到数据库
//导入querystring模块（解析post请求数据）
var querystring = require('querystring');
console.log(req.method);
//1.通过判断url路径和请求方式来判断是否是表单提交
if (req.url === '/heroAdd' && req.method === 'POST') {
/**服务端接收post请求参数的流程
* （1）给req请求注册接收数据data事件（该方法会执行多次，需要我们手动累加二进制数据）
* * 如果表单数据量越多，则发送的次数越多，如果比较少，可能一次就发过来了
* * 所以接收表单数据的时候，需要通过监听 req 对象的 data 事件来取数据
* * 也就是说，每当收到一段表单提交过来的数据，req 的 data 事件就会被触发一次，同时通过回调函数可以拿到该 段 的数据
* （2）给req请求注册完成接收数据end事件（所有数据接收完成会执行一次该方法）
*/
//创建空字符叠加数据片段
var data = '';
//2.注册data事件接收数据（每当收到一段表单提交的数据，该方法会执行一次）
req.on('data', function (chunk) {
// chunk 默认是一个二进制数据，和 data 拼接会自动 toString
data += chunk;
});
// 3.当接收表单提交的数据完毕之后，就可以进一步处理了
//注册end事件，所有数据接收完成会执行一次该方法
req.on('end', function () {
//（1）.对url进行解码（url会对中文进行编码）
data = decodeURI(data);
console.log(data);
/**post请求参数不能使用url模块解析，因为他不是一个url，而是一个请求体对象 */
//（2）.使用querystring对url进行反序列化（解析url将&和=拆分成键值对），得到一个对象
//querystring是nodejs内置的一个专用于处理url的模块，API只有四个，详情见nodejs官方文档
var dataObject = querystring.parse(data);
console.log(dataObject);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
完整代码
//1.导入http模块
var http = require('http');
//导入文件模块
var fs = require('fs');
//导入路径模块
var path = require('path');
//导入querystring模块（解析post请求数据）
var querystring = require('querystring');
//2.创建服务器
var app = http.createServer();
//3.添加响应事件
app.on('request', function (req, res) {
console.log(req.method);
//1.通过判断url路径和请求方式来判断是否是表单提交
if (req.url === '/heroAdd' && req.method === 'POST') {
/**服务端接收post请求参数的流程
* （1）给req请求注册接收数据data事件（该方法会执行多次，需要我们手动累加二进制数据）
* * 如果表单数据量越多，则发送的次数越多，如果比较少，可能一次就发过来了
* * 所以接收表单数据的时候，需要通过监听 req 对象的 data 事件来取数据
* * 也就是说，每当收到一段表单提交过来的数据，req 的 data 事件就会被触发一次，同时通过回调函数可以拿到该 段 的数据
* （2）给req请求注册完成接收数据end事件（所有数据接收完成会执行一次该方法）
*/
//创建空字符叠加数据片段
var data = '';
//2.注册data事件接收数据（每当收到一段表单提交的数据，该方法会执行一次）
req.on('data', function (chunk) {
// chunk 默认是一个二进制数据，和 data 拼接会自动 toString
data += chunk;
});
// 3.当接收表单提交的数据完毕之后，就可以进一步处理了
//注册end事件，所有数据接收完成会执行一次该方法
req.on('end', function () {
//（1）.对url进行解码（url会对中文进行编码）
data = decodeURI(data);
console.log(data);
/**post请求参数不能使用url模块解析，因为他不是一个url，而是一个请求体对象 */
//（2）.使用querystring对url进行反序列化（解析url将&和=拆分成键值对），得到一个对象
//querystring是nodejs内置的一个专用于处理url的模块，API只有四个，详情见nodejs官方文档
var dataObject = querystring.parse(data);
console.log(dataObject);
});
}
if (req.url === '/heroAdd' && req.method === 'POST') {
fs.readFile('./heroAdd.html', function (err, data) {
if (err) {
throw err;
}
res.end(data);
});
} else if (req.url.indexOf('/node_modules') === 0) {
fs.readFile(__dirname + req.url, function (err, data) {
if (err) {
throw err;
} else {
res.end(data);
}
});
} else {
res.end('请求路径： ' + req.url);
}
});
//4.监听端口号
app.listen(3000, function () {
console.log('欢迎来到王者荣耀英雄管理器');
});
---------------------
作者：坤小
来源：CSDN
原文：https://blog.csdn.net/u013263917/article/details/78682270
版权声明：本文为博主原创文章，转载请附上博文链接！
nodejs接收post请求参数的更多相关文章
- 提高生产力：SpringMVC中，使用扩展数据类型TypedMap接收Web请求参数
在Web项目中,如果前端MVC框架使用的是SpringMVC,可以使用Map接收前端请求参数,比bean要方便很多. 尤其是SpringMVC和Mybatis一起用的时候,用Map大大减少了需要的be ...
- Spring接收web请求参数的几种方式
1 查询参数 请求格式:url?参数1=值1&参数2=值2...同时适用于GET和POST方式spring处理查询参数的方法又有几种写法: 方法一:方法参数名即为请求参数名 // 查询参数1 ...
- js笔试-接收get请求参数
请编写一个JavaScript函数,它的用途是接收url中get请求的参数,并返回为对象, 如: var url = “https://i.cnblogs.com/EditPosts.aspx?opt ...
- asp.net接收ajax请求参数时为空的现象
如题,如果使用ajax请求asp.net后台时,如果使用jquery时,默认是添加了请求头,使后台能识别,并能通过Request对象进行获取. 但是如果你使用的是window.XMLHttpReque ...
- html 接收GET请求参数
function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +" ...
- 学习SpringMVC——如何获取请求参数
@RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@CookieValue)!她(@ModelAndView) ...
- springMvc源码学习之：spirngMVC获取请求参数的方法2
@RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他 (@CookieValue)!她(@ModelAndView ...
- Spring MVC在接收复杂集合参数
Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里前添加@RequestBody,而@RequestBody默认接收的enctype (MIME编码)是applica ...
- SpringMVC接收复杂集合参数
Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里前添加@RequestBody,而@RequestBody默认接收的enctype (MIME编码)是applica ...
随机推荐
- 逐行剖析Vue源码(一)——写在最前面
1. 前言 博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候 ...
- 【SpringCloud之pigx框架学习之路 】1.基础环境安装
[SpringCloud之pigx框架学习之路 ]1.基础环境安装 [SpringCloud之pigx框架学习之路 ]2.部署环境 1.Cmder.exe安装 (1) windows常用命令行工具 下 ...
- 从零实现一个React:Luster(一):JSX解析器
前言 这是之前在掘金发的两条沸点,懒得写了,直接复制过来作为前言了.然后这个项目可能之后还会继续写,增加一些路由或者模板引擎的指令什么的,但是再过没多久寒假就有大块时间了就可能不摸这个鱼去开其它坑了, ...
- mysql 创建用户, 分配权限, 删除用户
通过create user 命令来创建用户, 有两种方式:(只介绍通过 create user 命令, 直接往user表中插入数据的方式,这里就不说了) 创建用户的同时, 指定用户可登录的主机和密码 ...
- MySQL如果频繁的修改一个表的数据，那么这么表会被锁死。造成假死现象。
MySQL如果频繁的修改一个表的数据,那么这么表会被锁死.造成假死现象. 比如用Navicat等连接工具操作,Navicat会直接未响应,只能强制关闭软件,但是重启后依然无效. 解决办法: 首先执行: ...
- 此贴告诉你：为啥shell脚本人，不建议学python
py很强大,我承认.但在运维方面,py不但不强大,还有硬伤.正因为有下述硬伤,所以我们运维,还是用shell多,用py极少.我看到用shell的人很多,你建议人用python,人说py是很好,但下一秒 ...
- tensorflow之tf.squeeze()
tf.squeeze()函数的作用是从tensor中删除所有大小(szie)是1的维度. 给定丈量输入, 此操作返回的是相同类型的张量, 并删除所有尺寸为1的维度.如果不想删除所有尺寸为1的维度, 可 ...
- 图片与文本基础（html和css）
图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高. ...
- 在Edge Chromium中启用简体中文界面
Edge Chromium用了一阵子了,整体上还算比较好用的,由于可以直接使用chrome的扩展,基本上体验和chrome差不多,就是界面上不支持中文有点小不爽. 在Edge Chrome更新到77后 ...
- CefSharp F12打开DevTools查看console js和c#方法互相调用
转载地址: https://www.cnblogs.com/lonelyxmas/p/11010018.html winform嵌入chrome浏览器,修改项目属性 生成 平台为x86 1.nuget ...