본문 바로가기
자바스크립트/Node.js

[Node js] submit 버튼을 누르면 서버로 form의 정보를 전달

by Devry 2021. 8. 20.

약간의 html 내용이 포함되어있다.

 

write.html 파일로 가서

 

<form action="/add" method="POST">   (폼을 만들 때 꼭 있어야 하는 2개 속성)

 

action="/add"  전달하게 될 경로를 설정

method="POST"  get요청인지 post요청인지를 입력

 

server.js로 가서 

 

"어떤 사람이 /add 경로로 POST 요청을 하면  ???를 해주세요"

 

를 입력하면 된다.

 

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

이제 form에서 submit버튼을 누르면 전송완료라는 /add페이지가 뜬다.

 

 

그런데 input에 적은 정보는 아직 처리하지 않았는데

 

app.post의 콜백함수의 요청 파라미터에 들어가있다.

 

근데 쉽게 꺼내쓰려면 라이브러리를 깔아야함

 

서버를 끄고 다음을 입력

 

 npm install body-parser    또는   yarn add body-parser

 

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended : true}));

 

를 상단에 써서 임포트 해야 사용가능. 이해하려하지 말고 복붙하고 익숙해지자.

 

body-parser는 요청 데이터(body) 해석을 쉽게 도와줌

 

POST요청으로 서버에 데이터 전송하고 싶으면

1.body-parser필요

2.form데이터의 경우 input 태그에 name속성 쓰기

 

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

아까 내용에 name이 title인 input을 출력해보았다.

 

다음과같이 작성하고 Submit을 누르면

 

콘솔창에 전달이 된다.

 

요청.body 까지만 입력하면 오브젝트 자료형으로 출력된다.

댓글