接著我們來看GET與POST有什麼不同？

GET與POST的差異

我們先修改一下上面send()部分的內容：

function (req, res) {
res.send(`
<form action="/answer" method="POST">
    <p>晴天的天空是什麼顏色？</p>
    <input name="skyColor" autocomplete="off">
    <button>送出答案</button>
  </form>
  `)
}

輸出結果：上面有一個input輸入框。輸入框的地方顯示POST。

如果我們從輸入框輸入資料，就是走POST的方式。

接著，我們再加上下面兩段程式碼：

第一段：用POST

ourApp.post('/answer', function (req, res) {
res.send("謝謝您撥空填寫表單")
})

第二段：用GET

ourApp.get('/answer', function (req, res) {
res.send("迷路了嗎? 這裡什麼都沒有")
})

外加下面這段middleware，express.urlencoded()為了讓post可以被解讀。

ourApp.use(express.urlencoded({
  extended: false
}))

以下是所有程式碼：


let express = require("express")
let ourApp = express()
ourApp.use(express.urlencoded({
extended: false
}))
ourApp.get('/', function (req, res) {
    res.send(`
        <form action="/answer" method="POST">
        <p>晴天的天空是什麼顏色？</p>
        <input name="skyColor" autocomplete="off">
        <button>送出答案</button>
        </form>
        `)
    })
ourApp.post('/answer', function (req, res) {
    res.send("謝謝您撥空填寫表單")
})
ourApp.get('/answer', function (req, res) {
    res.send("迷路了嗎? 這裡什麼都沒有")
})
ourApp.listen(3000)

我們藉由以上的程式碼說明GET與POST的差異。當我們在頁面上按下submit（送出答案）按鈕時。頁面會到達http://localhost:3000/answer頁，並回覆『謝謝您撥空填寫表單』。可以看出來，目前程式執行的是第一段程式碼。可見這時候走的是POST方式。

ourApp.post('/answer', function (req, res) {
    res.send("謝謝您撥空填寫表單")
})

如果，我們直接在網址列輸入 http://hocalhost:3000/answer的話，雖然網址一樣，頁面則會顯示『迷路了嗎? 這裡什麼都沒有』。可見這時候走的是第二段GET程式碼。

ourApp.get('/answer', function (req, res) {
    res.send("迷路了嗎? 這裡什麼都沒有")
})

因此，如果要取得網址上面的參數，應該使用的是GET方式。

判斷使用者的輸入:POST

接著我們要判斷使用者輸入的內容，依照不同的內容做出不一樣的反應。於是我們可以利用if判斷式來進行條件判斷。在這裡我們希望使用者輸入不同的顏色，並且給予不同的反應。判斷式如下：

ourApp.post('/answer', function (req, res) {
    if (x == "blue") {
        // do something...
    } else {
        // do other things..
    }
})

其中，x == “blue”中的 x 是什麼？x是我們從網頁表單上面透過input欄位蒐集到的內容。

由於我們已經在 input欄位中<input name=”skyColor” autocomplete=”off”>，指定name為skyColor，我們可以透過它來勾住這個輸入框。我們把x替換為req.body.skyColor：

ourApp.post('/answer', function (req, res) {
    if (req.body.skyColor == "blue") {
        // do something...
    } else {
        // do other things..
    }
})

注意：為了避免使用者輸入大小寫不同產生不一樣的結果，我們可以強制將它轉換為大寫（或小寫）：

req.body.skyColor.toUpperCase() == "BLUE"

這樣子，不論使用者輸入大寫或小寫的blue，都會產生同樣的結果。

接下來填入server針對各個條件應該反應的行為。我們這裡使用templete string(“)將html原始碼加入各個位置：

ourApp.post('/answer', function (req, res) {
    if (req.body.skyColor == "blue") {
        res.send(`
            <p>恭喜您，答對了。這是正確答案</p>
            <a href="/">回首頁</a>
        `)
    } else {
       res.send(`
           <p>真可惜，答錯了。</p>
           <a href="/">回首頁</a>
       `)
   }
})

啟動server

$ node myServer.js

啟動伺服器後，如果顯示正常，就表示已經啟動server的服務了。接下來就可以試試輸入字串。先輸入blue，不論是blue還是Blue、BLUE或其他大小寫的組合，答案應該如下：

接著，試試blue以外的文字，顯示的結果應該如下：

Node.jsWeb應用框架 — Express建立Server服務 | by Sean Yeh | Web Design Zone | Medium

GET與POST的差異

判斷使用者的輸入:POST

啟動server