iT邦幫忙

3

Node.jS初學者筆記(2)-用POST傳送資料

這裡我們將學習用POST的方式將資料傳給Node.js的Web Server,以便進一步利用。

如果你還沒有裝Node.js,可參考:

在Windows安裝Node.js和CoffeeScript超簡單!!

如果你想知道如何用GET方式傳資料,可參考上一篇:Node.jS初學者筆記(1)-用GET傳送資料
我們將延續上一篇用GET方式的作法,改成POST之後,傳送資料到Web Server。

Step 1-將表單改用POST傳送

讓我們資源回收一下,把之前signupform.html的表格,由GET改成POST即可。

signupform.html

    <title>Node.js菜鳥筆記(2)</title>	
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
  
   
    <h1>Node.js菜鳥筆記-註冊</h1>
	<form id="signup" method="POST" action="http://localhost:3000/Signup">
	  <label>使用者名稱:</label><input type="text" id="username" name="username" /><br>
	  <label>電子郵件:</label><input type="text" id="email" name="email" /><br>
	  <input type="submit" value="註冊我的帳號" /><br>
	</form>
  

看到第9行,我們已經改成POST了,第一步就這樣收工。當然title改成第二回比較不會錯亂。

Step 2-監聽data與end事件來處理POST
讓我們先寫出改成POST之後,需要的程式碼。
app.coffee

http = require 'http'
url = require 'url'
qs = require 'querystring'

server = http.createServer (req,res) ->
   urlData = url.parse req.url,true
   action = urlData.pathname
   res.writeHead 200,"Content-Type":"text/html"
   if action is "/Signup"
		   formData = ''
		   req.on "data",(data)->
				   formData += data

		   req.on "end", ->
				   user = qs.parse formData
				   res.writeHead 200,"Content-Type":"text/html"
				   res.end "<h1>#{user.username}歡迎您的加入</h1><p>我們已經將會員啟用信寄至#{user.email}</p>"
   else
		   res.end "<h1>歡迎光臨Node.js菜鳥筆記</h1>"

   
server.listen 3000

console.log 'Server跑起來了,現在時間是:' + new Date()

第3行我們加入了'querystring'這個moduel,方便我們等一下解析由表單POST回來的資料。

第10行我們加入一個formData的變數,用來搜集待等一下表單回傳的資料。

第11行開始,就是本文的重點了。對JavaScript有點認識的朋友,應該都知道JavaScript是一種事件驅動的語言,也就是說,它一直在監聽著各種事件來決定它要如何工作;有事件,它才有動作。這種特性一樣在node.js上體現。

在上一篇文章中,我們只從req拿出url的資料,這次我們要在它身上加上事件。JavaScript在訂閱事件時使用addEventListener,而node.js使用的則是on。

第11行我們加上了監聽'data'的事件,它會在瀏覽器傳送資料到Web Server時被執行,參數是它所接收到的資料,型態是字串。第14行,我們加上'end'的事件,當瀏覽器的請求事件結束時,它就會動作。

由於瀏覽器使用POST在上傳資料時,會將資料一塊塊地上傳,因為我們在監聽data事件時,透過formData變數將它累加起來。由於我們上傳的資料很少,一次就結束,不過如果日後需要傳的是資料比較大的檔案,這個累加動作就很重要。

當資料傳完,就進到end事件中,我們用到qs.parse來解析formData。formData的內容是字串,內容是:

username=wordsmith&email=wordsmith%40some.where

而qs.parse可以幫我們把這個querystring轉成物件的格式,也就是:

{username=wordsmith&email=wordsmith%40some.where}

一旦轉成物件並指定給user之後,其他的事情就和GET方法時操作的一樣,寫response的表頭,將內容回傳,並將user.username和user.email代入到內容中。

Step 3-app.js up and run

接下來的部分就簡單了。

1)將app.coffee編譯成app.js

coffee -c app.coffee

2)執行app.js

node app.js

3.用Signup表單發送username和email的資料

4.收到完事的回應。

收工。

好了,用POST傳送資料就介紹到這裡了,下一篇我們將用Ajax的方式來傳送資料。

延伸閱讀
1.node.js的http module說明:
http://nodejs.org/docs/latest/api/http.html

2.node.js的url module說明:
http://nodejs.org/docs/latest/api/url.html

3.node.js的querystring module說明:
http://nodejs.org/docs/latest/api/querystring.html

4.The Little Book on CoffeeScript
http://arcturo.github.com/library/coffeescript/

5.Node入門(中文)
http://www.nodebeginner.org/index-zh-tw.html

附錄:
編譯後的app.js

(function() {
  var http, qs, server, url;

  http = require('http');

  url = require('url');

  qs = require('querystring');

  server = http.createServer(function(req, res) {
    var action, formData, urlData;
    urlData = url.parse(req.url, true);
    action = urlData.pathname;
    res.writeHead(200, {
      "Content-Type": "text/html"
    });
    if (action === "/Signup") {
      formData = '';
      req.on("data", function(data) {
        return formData += data;
      });
      return req.on("end", function() {
        var user;
        user = qs.parse(formData);
        res.writeHead(200, {
          "Content-Type": "text/html"
        });
        return res.end("<h1>" + user.username + "歡迎您的加入</h1><p>我們已經將會員啟用信寄至" + user.email + "</p>");
      });
    } else {
      return res.end("<h1>歡迎光臨Node.js菜鳥筆記</h1>");
    }
  });

  server.listen(3000);

  console.log('Server跑起來了,現在時間是:' + new Date());

}).call(this);

2 則留言

0
chetbaker
iT邦新手 3 級 ‧ 2012-02-10 09:45:48

最近也很想學node.js,請問有什麼推薦書嗎?怎麼樣入門比較容易一點。

基本是我平常寫actionscript比較多,javascript反而機會比較少一點,不過本質上他們可以當成一樣的語言吧。所以有這樣的基礎,適合學這種"Server端"的語言嗎?

0
wordsmith
iT邦高手 1 級 ‧ 2012-02-10 12:39:47

其實自己是看著上面延伸閱讀 Node入門(http://www.nodebeginner.org/index-zh-tw.html)的英文版開始學Node.js的,看英文版是因為當時不知道有中文版,看完後才發現... 暈,所以你可以直接看中文版來學習。

另外最近發現一本很棒的電子書Node for Front-End Developers (http://www.amazon.com/Node-for-Front-End-Developers-ebook/dp/B0073U0XFM/ref=sr\_1\_fkmr0\_3?ie=UTF8&qid=1328848496&sr=8-3-fkmr0),從書名就不難知道,它是為熟悉前端的開發人員的角度,來介紹node。書的頁數不多,很快可以看完。我覺得對初學者來說,這一本也很棒。

我自己的工作也是偏前端,所以對Server端也不是那麼熟,也是想說趁著這個機會,學習一下Server端的知識。所以你說適不適合,我覺得有心就可以啦~

我要留言

立即登入留言