node.js와 express-generator로 간단한 Ajax 프로그래밍
만드는 것
↓ 「2」를 입력하고 버튼을 누르면 Ajax 통신하여 표시합니다.
전제
express-generator 설치
Express에서 실행할 수있는 앱의 병아리를 만드는 라이브러리 express-generator 설치 npm install -g express-generator
병아리 앱 자동 생성
## 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/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
//（途中省略）
뷰 만들기
/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판]
Reference
이 문제에 관하여(node.js와 express-generator로 간단한 Ajax 프로그래밍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tseno/items/8fc7426ff90cb96e24de텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
