express with post/get/ajax

(Updated: )

使用NodeJS版本為v0.8.18

在終端機中輸入

1
express test -e

開啟package.json檔案，將版本都修改為*號。

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "*",
    "ejs": "*"
  }
}

完成後到終端機輸入

1
npm install -l

在view資料夾內新增sign.ejs與sign2.ejs兩個檔案，這兩個檔案是用來接收post與get的資料並且顯示出來。

index.ejs程式碼如下

index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $('#send').on('click',function(){
          var data = {
            'account': $('#ajax_account').val(),
            'pass': $('#ajax_pass').val()
          };
          $.post('/sign3', data ,function(data2) {
            $('#ajax').html(data2);
            console.log(data2);
          });
        });
      });

    </script>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <h1>GET Method</h1>
    <form action="/sign" method="GET">
      <table>
        <tr>
          <td>Accout<input type="text" name="account" /></td>
        </tr>
        <tr>
          <td>Password<input type="text" name="pass" /></td>
        </tr>
        <tr>
          <td><input type="submit" value="send" /></td>
        </tr>
      </table>
    </form>

    <h1>POST Method</h1>
    <form action="/sign2" method="POST">
      <table>
        <tr>
          <td>Account<input type="account" name="account" id="account"></td>
        </tr>
        <tr>
          <td>Password<input type="pass" name="pass" id="pass"></td>
        </tr>
        <tr>
          <td><input type="submit" value="send"></td>
        </tr>
      </table>
    </form>

    <h1>AJAX Method</h1>
    <form action="#">
      <table>
        <tr>
          <td>Account<input type="account" name="account" id="ajax_account"></td>
        </tr>
        <tr>
          <td>Password<input type="pass" name="pass" id="ajax_pass"></td>
        </tr>
        <tr>
          <td><button type="button" id="send">send</button></td>
        </tr>
      </table>
    </form>

    <div id="ajax"></div>

  </body>
</html>

接著開啟根目錄下的app.js加入form的action方法進去。

app.js
1
2
3
4
app.get('/', routes.index);
app.get('/sign', routes.sign);
app.post('/sign2', routes.sign2);
app.post('/sign3', routes.sign3);

定義好對應的方法後，在到routes資料夾內的index.js撰寫方法的執行內容，程式碼如下：

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//GET Method
exports.sign = function(req, res){
  res.render('sign', {
    title: 'Show Result',
    account: req.query.account,
    pass: req.query.pass
  });
};

//POST Method
exports.sign2 = function(req, res){
  res.render('sign2', {
    title: 'Show Result',
    account: req.body.account,
    pass: req.body.pass
  });
};

//AJAX Method
exports.sign3 = function(req, res) {
  res.send('Account:' + req.body.account + ', Pass:' + req.body.pass)
};

sign.ejs與sign2.ejs的內容分別為：

sign.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Show Result</h1>
    <p>Accout:<%= account%></p>
    <p>Password:<%= pass%></p>
  </body>
</html>

sign2.ejs
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Show Result</h1>
    <p>Accout:<%= account%></p>
    <p>Password:<%= pass%></p>
  </body>
</html>

程式碼放在這：下載

參考資料

Express 介紹