Edited at

node.jsとexpress-generatorで 簡単なAjaxのプログラム作成


作るもの

スクリーンショット 2019-04-09 7.30.11.png

↓「2」を入力してボタンを押すと、Ajax通信して表示する。

スクリーンショット 2019-04-09 7.30.29.png


  • ソース

https://github.com/tseno/nodejsapp/tree/master/ajax-app


前提


  • node.jsがインストール済み


express-generatorのインストール


  • フレームワーク Express で動かすことができるアプリの雛形を作ってくれるライブラリ express-generator のインストール

npm install -g express-generator


雛形アプリの自動生成


  • Express 雛形アプリの自動作成(作りたいディレクトリの上で実行すると、ajax-appディレクトリが作られ、アプリが作成される)

## ajax-app というアプリが作成される

express --view=ejs ajax-app
# ディレクトリ移動
cd ajax-app
# package.jsonが自動生成されているので、そこに書いてあるライブラリをインストール
npm install


アプリの作成


  • ディレクトリ構造

ajax-app/

├── app.js ← 今回修正
├── bin
│   └── www
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│   └── style.css
├── routes
│   ├── ajax.js ← 今回追加
│   ├── index.js
│   └── users.js
└── views
├── ajax.ejs ← 今回追加
├── error.ejs
└── index.ejs


アクションの作成


  • routes/index.jsをコピーしてajax.jsを作成する。

  • 初期表示と、ボタン押下時のアクションを作成する。


routes/ajax.js

var express = require('express');

var router = express.Router();

var data = [
{name: 'Taro', age: '35', mail: 'taro@yamada'},
{name: 'Hanako', age: '29', mail: 'kanako@flower'},
{name: 'Sachiko', age: '41', mail: 'sachiko@happy'},
];

// 初期画面表示
router.get('/', function(req, res, next) {
var msg = "0〜2の数字を入力して送信してください。";
var data = {
title: 'Ajax!',
content: msg
};
res.render('ajax', data);
});

// ボタン押下時に、data配列のn番目のJSONを送る。
router.get('/get', function(req, res, next) {
var n = req.query.id;
res.json(data[n]);
});

module.exports = router;



メインプログラム(app.js)の修正


  • エンドポイント /ajax と、ファイル /route/ajax を関連づける。


app.js(一部)

//(途中省略)

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var ajaxRouter = require('./routes/ajax'); // add
//(途中省略)
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/ajax', ajaxRouter); // add
//(途中省略)


ビューの作成


  • JQueryでボタン押下時にnumテキストボックスの値を/ajax/getにGETで送って、返却された値を画面に表示している。


views/ajax.ejs

<!DOCTYPE html>

<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><%= title %></title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css">
<script>
$(document).ready(function () {
$('#btn').click(function() {
var n = $('#num').val();
$.getJSON("/ajax/get?id=" + n, function (json) {
var msg = '<table>'
+ '<tr><th>名前</th>'
+ '<td>'+ json.name +'</td></tr>'
+ '<tr><th>年齢</th>'
+ '<td>'+ json.age +'</td></tr>'
+ '<tr><th>メール</th>'
+ '<td>'+ json.mail +'</td></tr>'
+ '</table>';
$('#msg').html(msg);
})
})
})
</script>
</head>
<body>
<header>
<h1><%= title %></h1>
</header>
<div role="main">
<p id="msg"><%- content %></p>
<input type="text" name="num" id="num">
<input type="button" id="btn" value="GET!">
</div>
</body>
</html>



アプリの実行

npm start

http://localhost:3000 を開いて、0~2の数字を入力してボタンを押す。

参考文献

Node.js 超入門[第2版]