[Node.js] 4. Form 태그 기능개발 (POST요청)

(코딩애플 강의)

 

POST요청처리

 

Submit 버튼을 누르면 폼에 입력한 제목과 날짜를 서버로 전달하기

 

Form 태그 세팅

HTML 문서의 form내 input에 입력한 데이터들을 서버로 전송할수 있다.

전송을 위해 form태그에 전송방법을 명시해준다.  action과 method 값 넣기

 

write.html

<form action="/add" method="POST">
    <div class="form-group">
        <label for="title">할일</label>
        <input type="text" class="form-control" name="title" id="todo">

    </div>
    <div class="form-group">
        <label for="date">Due Date</label>
        <input type="text" class="form-control" name="date" id="dueDate">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

submit타입의 전송버튼 클릭시 /add 경로로 POST 요청하는 폼

action - 경로 , method - GET/POST

 

 

server.js

// server.js
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});


// /경로로 보내주기
app.get('/', function(요청, 응답){
    응답.sendFile(__dirname + '/index.html');
});

app.get('/write', function(요청, 응답){
    응답.sendFile(__dirname + '/write.html');
});

app.post('/add', function(요청, 응답){
    응답.send('전송완료');
});

 

실행하면

 

add 로 경로이동과 보낸 '전송완료' 가 뜸! 

 

form에서 입력한 데이터를 서버로 전송하기 위해 body-paerser 라이브러리 설치하기

 

post로 전송한 input에 적은 정보는 요청에 들어있다.

요청에 있는 정보를 꺼내쓸려면 라이브러리가 추가로 필요함.

 

 

body-parser 

npm install body-parser

설치 후 서버를 실행해주고

server.js의 위쪽에 코드를 추가해준다.

// server.js

..
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}))

..

 

 

POST 요청처리하는 코드짜기

// server.js

app.post('/add', function(요청, 응답){
    console.log(요청.body);
    console.log(요청.body.title);
    console.log(요청.body.date);
    응답.send('전송완료');
});

브라우저화면에서 데이터를 입력하고 전송버튼을 누르면 콘솔창에 아래처럼 입력한 결과값이 보내짐.