node.js系列（實例）：原生node.js實現接收前臺post請求提交數據

技術交流羣：821039247

前臺界面：

前臺代碼：

 1 <form class="form-horizontal" method="post" action="http:127.0.0.1:3000/post">
 2         <div class="form-group">
 3             <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
 4             <div class="col-sm-4">
 5                 <input type="text" name="username" class="form-control" id="inputEmail3">
 6             </div>
 7         </div>
 8         <div class="form-group">
 9             <label class="col-sm-2 control-label">性別</label>
10             <div class="col-sm-4">
11                 <label class="radio-inline">
12                     <input type="radio" name="sex" value="男" checked> 男
13                 </label>
14                 <label class="radio-inline">
15                     <input type="radio" name="sex" value="女"> 女
16                 </label>
17             </div>
18         </div>
19         <div class="form-group">
20             <label class="col-sm-2 control-label">愛好</label>
21             <div class="col-sm-4">
22                 <label class="checkbox-inline">
23                     <input type="checkbox" name="hobby" checked value="吃飯"> 吃飯
24                 </label>
25                 <label class="checkbox-inline">
26                     <input type="checkbox" name="hobby" value="睡覺"> 睡覺
27                 </label>
28                 <label class="checkbox-inline">
29                     <input type="checkbox" name="hobby" value="打豆豆"> 打豆豆
30                 </label>
31             </div>
32         </div>
33         <div class="form-group">
34             <div class="col-sm-offset-2 col-sm-10">
35                 <button type="submit" class="btn btn-default">提交</button>
36             </div>
37         </div>
38     </form>

View Code

node.js代碼：

 1 /**
 2  * 原生node.js接收前臺post請求數據
 3  * @Author:Ghost
 4  * @Date:2016/07/14
 5  * @description:
 6  * 一、引入http,querystring（字符串解析）模塊
 7  * 二、建立http服務器，監聽3000端口
 8  * 三、判斷路由是否爲post和請求類型是否爲post,若是是則進入請求接收處理
 9  * 四、聲明變量alldata 存儲接收到的數據
10  * 五、綁定http請求的data事件，接收存儲數據字符串
11  * 六、綁定http請求的end事件，處理接收到的數據字符串，轉換爲對象
12  * 七、輸出
13  */
14 
15 //引入模塊
16 var http = require('http');
17 var querystring = require('querystring');
18 
19 //建立服務器
20 var server = http.createServer(function (req, res) {
21     if (req.url === '/post' && req.method.toLowerCase() === 'post') {
22         var alldata = '';
23         req.on('data', function (chunk) {
24             alldata += chunk;
25         });
26 
27         req.on('end', function () {
28             res.end('success');
29             //將字符串轉換位一個對象
30             console.log(alldata); //username=%E6%9D%8E%E5%9B%9B&sex=%E5%A5%B3&hobby=%E7%9D%A1%E8%A7%89&hobby=%E6%89%93%E8%B1%86%E8%B1%86
31             var dataString = alldata.toString();
32             //將接收到的字符串轉換位爲json對象
33             var dataObj = querystring.parse(dataString);
34             //輸出數據
35             console.log(dataObj);  //{ username: '王五', sex: '男', hobby: [ '吃飯', '睡覺', '打豆豆' ] }
36             console.log(dataObj.username); //王五
37             console.log(dataObj.sex); //男
38             console.log(dataObj.hobby); //[ '吃飯', '睡覺', '打豆豆' ]
39         });
40     };
41 });
42 //設置監聽端口
43 server.listen(3000, "127.0.0.1", function () {
44     console.log("server is started listen port 3000");
45 });