(19) 데이터 전송 (GET 방식)

express(모듈)와 jade(모듈)를 로드하여 get방식으로 데이터를 전송하는 것을 알아보자. 

views 폴더 밑에 form.jade 파일을 위치시켜 놓았다.

==================================================================

// form.jade 파일을 봐주자.

doctype html

html

head

meta(charset='utf-8')

body

form(action='/form_receiver' method='get')      // 디폴트값은 get방식이다.    

p

input(type='text' name='title')     // post 방식으로 데이터를 전송하는 경우 Cannot GET

p                                                         //  / form_receiver?.....이 나타난다. 

textarea(name='description')

p

input(type='submit' value='forward Server')

// jade의 주석처리는 이것으로 한다.

// get 방식을 해보았다.

==================================================================

++app.js 에 추가해주자.

app.get('/form',function(req, res){

res.render('form');

});

==================================================================

url: 127.0.0.1:3000/form 으로 접근시에 views 안에 위치한 form.jade 파일을 랜더링하는 것 알아두자. (res.render('form'))

node app.js를 실행시켜주자.

// text 박스와 textarea 에 값을 입력해주자.

페이지 소스보기를 해보자.

// form_receiver 에대한 패쓰를 지정해주지 않았으므로 아래와같이 Connot GET ~~가 출력된다.

폼태그에서 GET 방식으로 name=title, description과 value=12,123을 넘길 경우 웹브라우저에서 자동적으로 쿼리스트링을 생성해주는 것 알아두자.

=====================================================================================

++ app.js 에 라우터(/form_receiver)를 만들어주자.

app.get('/form_receiver', function(req, res){

var tit = req.query.title;

var des = req.query.description;

var output = `

<h2>title : ${tit} </h2>

<h2>description : ${des} </h2>

`;

res.send(output);

}); 

======================================================================================

가장 위의 forward Server 서브밋버튼을 누를 경우 form_receiver 패쓰로 가게 된다. 이 때는 아래와 같은 화면을 뿌려준다. 

 post 방식으로 데이터를 전송하는 경우에는 Cannot /form_receiver ...가 출력된다. 

그리고 url 뒤의 쿼리 스트링이 나타나지 않는다. 

이때는 사용자가 입력한 정보가 서버로 잘 전송이 된 상태지만 post방식의 경우에 url 대신 header 에 정보를 실어서 전송하기 때문에 url에 그 값들이 보이지 않는 것이다. 단순히 방법의 차이이다.  

어떻게하면 post방식으로 보낸 데이터를 서버측에서 확인할 수 있는가?를  다음 글에서 알아보자. 

출처: https://sourceflower.tistory.com/19?category=561762 [소스플로우]