node express POSTのデータの送信と受信

node express ectでクライアントからサーバにPOSTでデータの送信と受信する処理をプログラミングしてみました。formのsubmitからの送信の場合とjQueryを使用して送信した場合です。

node expressのプロジェクトを生成して自分自身がプログラミングしたソースは次の通りです。(※実際はindex.ect以外のectファイルの編集もしていますが、今回の記事の内容と関係ないので割愛します。)

=== app.js ===
今回、クライアントから受信するPOSTデータをサーバ側で処理するプログラム(sendreceive.js)を紐つけています。(9、29行目)

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
var routes = require('./routes/index');
var sendreceive = require('./routes/sendreceive');
 
var app = express();
 
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
 
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', routes);
app.use('/sendreceive', sendreceive);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
 
module.exports = app;

=== sendreceive.js ===
クライアントから受信したデータ"sendParam"を、クライアントにJSONのデータに含めて、送信しています。(6行目)

var express = require('express');
var router = express.Router();
 
/* POST ajax listing. */
router.post('/', function(req, res, next) {
    res.send({"send parameter is" : req.body.sendParam});
});
 
module.exports = router;

=== index.ect ===
formのsubmitして送信する場合は、"from form" を送信するようにしています。 (14行目)
jQueryを使用して送信する場合は、"from ajax" を送信するようにしています。 (36行目)

<% extend 'layout' %>
 
<%= "This is sample"  %>
 
 
<div id="drag-area" style="background-color: lightgrey; text-align: center;">
ajaxボタン送信ボタンを押すと、ajax送信します。<br />
<div class="btn-group">
<button id="btn">ajax送信</button>
</div>
</div>
<form action="/sendreceive" method="post" name="frm">
<input name="sendParam" type="hidden" value="from form" />
    >input type="submit" value="form送信" />
</form>
<div id="test">
</div>
<% block 'footer-info' : %>
  <div class="right">
page: sample</div>
<script>
 
$(function(){
    $('#btn').click(function() {
        sendData();
    });
});
 
function sendData() {
 
    $.ajax({
        url: "http://" + location.host + "/sendreceive",
        type: "post",
        data: {"sendParam": "from ajax"},
        success: function(data) {
            alert("データが送信されました。 : " + JSON.stringify(data));
        }
    });
}
 
</script>
<% end %>

また、後でメモとして見返すことを考えて、package.jsonも載せておきます。

=== package.json

{
    "name": "xxx",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0",
        "node-stringify": "0.0.19"
    }
}

動作確認したスクリーンショットは次の通りです。

＊初期画面表示時
　jQueryを使用しての確認は"ajax送信"ボタンを押下して確認します。
　formのsubmitからの確認は"form送信"ボタンを押下して確認します。

＊"ajax送信"ボタンを押下後

＊"form送信"ボタンを押下後