jQuery Ajax를 사용하여 서버와 비동기 통신을 하는 방법이다.
Front-End 단에서 사용하는 loginForm.html 이다. ( 테스트용으로 사용하던 loginForm.php 파일을 약간 수정)
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login-submit').click(function(e){
e.preventDefault();
var userID = $("input[name='userID']");
if( userID.val() =='') {
alert("아이디를 입력하세요");
userID.focus();
return false;
}
var password = $("input[name='password']");
if(password.val() =='') {
alert("비밀번호를 입력하세요!");
password.focus();
return false;
}
$("form").submit();
});
});
</script>
</head>
<body>
<div class="container">
<h2>로그인 Form 예제</h2>
<form method="post" action="/login">
<table>
<tr>
<td style="font-size:14px">로그인 ID</td>
<td><input type="text" name="userID" value=""></td>
</tr>
<tr>
<td style="font-size:14px">패스워드</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan='2' align=left>
<input type="button" id="login-submit" value="로그인">
</td>
</tr>
<tr>
<td colspan='2'><p>회원이 아니신가요? <a href="joinForm.html">회원가입 하기</a></p></td>
</tr>
</table>
</fom>
</div>
</body>
</html>
|
jQuery 를 CDN 경로로 설정하여 사용하는 것이 편하다.
node_modules/jquery 디렉토리에 설치하여 사용하고자 한다면 ....
npm install jquery --save 를 실행하여 jQuery 라이브러리를 설치한다.
app.js 파일에서 app.use('/node_modules', express.static(path.join(__dirname + '/node_modules'))) 를 추가한다.
loginForm.html 파일에서 <script src="node_modules/jquery/dist/jquery.min.js"></script> 로 수정한다.
app.js
- public 디렉토리를 static 으로 지정한다.
- express 4.16.0 이상부터 body-parser 를 별도 설치할 필요가 없다.
- form action='/login' 부분이 Back-End app.js 파일 내 app.post('/login', ... ) 에서 처리한다.
- res.render 에서 views 디렉토리 index.ejs 로 값을 넘겨 화면에 출력한다.
|
var express = require('express');
var path = require('path');
var app = express();
app.listen(3000, function() {
console.log("start, express server on port 3000");
});
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.json()); //json 형태로 parsing
app.use(express.urlencoded({ extended: false }));
app.get('/', function(req,res) {
res.sendFile(__dirname + "/publc/index.html");
});
app.post('/login', function(req, res) {
// Form POST 전송의 결과 즉 action='/login'
var post = req.body;
console.log(post);
res.render('index.ejs', {'title':post.userID});
});
module.exports = app;
|
여기서 전달할 데이터 userID 를 {'title' : res.body.userID}
index.ejs 파일에서 변수로 받는 <%= title %> 에 전달한다.
좀 더 완벽하게 Ajax 처리하는 것은 다음에 올릴 예정이다.
'node.js' 카테고리의 다른 글
| sqlMessage: "Access denied for user ''@'localhost' (using password: NO)" (0) | 2022.11.19 |
|---|---|
| [Node.js] ejs View, nunjucks View (0) | 2022.11.18 |
| nodeJS 유틸리티 상속 (0) | 2022.06.09 |
| 프로그래밍 모델 : 동기(Synchronous) vs 비동기(Asynchronous) (0) | 2022.06.09 |
| 한시간만에 끝내는 Node.js 입문 강의 실습 (0) | 2022.01.15 |
Link2Me