nodejs接收post请求参数

时间 2019-12-04

原文原文链接

原文 http://www.javashuo.com/article/p-rtgjbxti-cd.htmlcss

nodejs接收post请求参数
1.1-浏览器发送post请求参数的方式
1.2-服务端接收post请求参数的方式html

post请求参数不直接在url路径中拼接，而是放在请求体中发送给服务器node

请求三要素：请求行、请求头、请求体
1.1-浏览器发送post请求参数的方式
post请求参数不能直接在url路径中拼接，因此通常使用ajax请求来发送post请求参数
一般都是提交form表单数据使用post请求jquery

<script>ios

//浏览器中通常使用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
完整代码ajax

<!DOCTYPE html>
<html lang="en">数据库

<head>
<meta charset="UTF-8">
<title>Hero - Admin</title>

<script src="/node_modules/jquery/dist/jquery.js"></script>

<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>json

<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>

<p class="help-block">请上传英雄图片.</p>
</div>
<button type="submit" class="btn btn-success">点击保存</button>
</form>
</div>
</body>bootstrap

</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);

// 3.当接收表单提交的数据完毕以后，就能够进一步处理了
//注册end事件，全部数据接收完成会执行一次该方法
req.on('end', function () {

//（1）.对url进行解码（url会对中文进行编码）
data = decodeURI(data);
console.log(data);

/**post请求参数不能使用url模块解析，由于他不是一个url，而是一个请求体对象 */

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); }});