programlearned
  • Introduction
  • js 筆記
    • Hammer.js 應用
  • node 筆記
    • 安裝與開始
    • exports 的應用
    • http 模組知識
    • Express 開始
      • 載入靜態檔案(image,css,js)
      • ejs 的使用
      • ejs layout的使用
      • ejs include的使用
      • ejs-form 的使用
      • ejs-ajax 的使用
      • route 的整理使用
    • 參考資料
  • vue 筆記
    • 安裝與開始
    • 基礎知識
      • 創建vue與輸出
      • v-bind 綁訂應用
      • v-for 與 v-if
      • v-on
      • v-class
      • 計算功能函數
      • 表單資料綁定
      • TodoList製作
    • 參考資料
  • Bootstrap 筆記
    • 相關資源網站
    • 安裝與開始
    • CSS 基礎知識
    • 容器container 應用
    • 網格系統 應用
      • 斷點
      • 版本斷點比較
      • 欄位排序
      • 欄位推移
      • 巢狀欄位
      • Flexbox 方向性
    • 間隔工具
    • 按鈕(button)
    • 不同的呈現(display)方式
    • 容器對齊方式
    • 文字(背景顏色)對齊與樣式
    • 導覽列應用
    • 參考資源
  • gitbook 製作與離線版
Powered by GitBook
On this page

Was this helpful?

  1. node 筆記
  2. Express 開始

ejs-form 的使用

建立與使用

  • 建立 search.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="/searchList" method="post" >
        <input type="text" name="content" id="content" value="">
        <input type="submit" id="send"  value="送出">
    </form>
</body>
</html>
  • 在專案router js檔加入

app.post('/searchList',function(req,res){
    console.log(req.body.title);
    var title = req.body.title;
    //轉址(網址為search=>無法傳值)
    //res.redirect('search');

    //轉址渲染(網址為search)   
    res.render('search',{
        'title':title
    });
})
  • 說明 :

    • 先用 form action 指向 路徑:searchList method使用post

    • 使用 app.post() 接收request

    • 用 res.render() 渲染 search.ejs 並傳值(title)

  • 執行 : node 你的.js 並到127.0.0.1:3000/search 輸入任意字串 即可看到成果

Previousejs include的使用Nextejs-ajax 的使用

Last updated 6 years ago

Was this helpful?