Express body-parser 取得表單資料

這篇將跟大家講解到，如何從前端傳送表單資料到後端去，且用 body-parser 來解析資料

安裝 body-parser 套件

body-parser 為一個解析表單資料的套件，先 npm install body-parser --save 安裝好之後
就可以來引用了

const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

上述就是引用的程式碼，當好了之後可以藉由 req.body 來取得表單的資料

---

傳統表單的傳送方式

先模擬一下傳統表單送出之後的流程，首先會有一個 search.ejs，route 也需建立來 render 它

// route 的部分
app.get('/search', function(req, res) {
  res.render('search');
});

<!-- search.ejs 的部分 --> 
<form action="/searchList" method="POST">
  <input type="text" name="searchText" value="">
  <input type="submit" value="送出">
</form>

因為 form 的 action 是傳送到 searchList 所以還需要新增這個 route

// 要注意這裡是採用 post，因為 form 的 methods 是 post
app.post('/searchList', function(req, res) {
  // 在 console 看表單傳送過來的資料
  console.log(req.body)
  // 接收到資料後，轉址回去 /search
  res.redirect('search');
});

這個時候在頁面輸入文字且送出之後，就可以在 console 看到物件的資料，記得加上 redirect 轉址的設定
不然頁面會一直呈現轉圈的動作

---

採用 AJAX 傳送表單

不同於傳統表單，這次採用 AJAX 傳送表單資料，先新建一個 API route

app.post('/searchAjax', function(req, res) {
  console.log(req.body)
});

接著在 search.ejs 做一點改變

<!-- 這次在 form 不加入 action 和 method -->
<form>
  <input type="text" name="account" value="" id="account">
  <input type="password" name="password" value="" id="password">
  <input type="submit" value="送出" id="send">
</form>

在下方就直接寫入 AJAX 的 script

// 選取 DOM 元素
const account = document.querySelector('#account');
const pwd = document.querySelector('#password');
const send = document.querySelector('#send');

// 按鈕點擊之後監聽事件
send.addEventListener('click', function(e) {
  // 取消元素預設行為
  e.preventDefault();
  // 新建一個 http 請求
  const xhr = new XMLHttpRequest();
  // 採用 post，路由為 /searchAjax
  xhr.open('post', '/searchAjax');
  // 設定 header
  xhr.setRequestHeader('Content-type', 'application/json');
  // 要傳送的資料
  const data = {
    account: account.value,
    password: pwd.value
  }
  // 要轉成字串傳送
  xhr.send(JSON.stringify(data));
  // 送出之後的 onload 事件
  xhr.onload = function() {
    console.log(xhr.responseText)
  }
});

這個時候在 console 看，就會出現我們傳送過去的物件資料，body-parser 會幫我們自動解析為 json 格式