作るもの
↓「2」を入力してボタンを押すと、Ajax通信して表示する。
- ソース
前提
- 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版]