原文 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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！