[Back-end] Html에서 get방식으로 파라미터 값 넘기기

URL로 파라미터를 넘기는 방식에 대해 선행이 필요하다면 아래로

[Back-end] get방식으로 파라미터 값 넘기기

 

HTML에서 form으로 파라미터 값 받기

앞서 글에서 get방식을 통해 파라미터값을 넘기는 방식을 알았다.

하지만 사람들이 사이트에 접속할 때 주소창에 파라미터를 직접 입력해서 이동하진 않는단 것도 알것이다.

실제 웹페이지에서 get방식으로 파라미터 값을 어떻게 받고 전달하는 지 알아본다.

html태그에서 form태그를 사용하여 get방식으로 파라미터를 넘겨줄 수 있다.

action은 이동할 페이지의 라우팅 경로, method에 get방식이란 것을 명시해준다.

input태그의 text타입은 문자형식으로 user_name변수의 값을 받겠다는 것이고

submit타입은 제출의 기능을 하는 버튼을 생성한다.

 

위 html문서의 위치는 templates폴더의 login.html이고 위와 같은 형식의 페이지가 만들어진다.

type이 text였던 input태그에 문자를 적어넣고 submit버튼을 눌러준다.

주소창을 보면 action의 /login대로 페이지가 이동하며

첫 번째 파라미터인 ?user_name 의 값으로 

input태그에 적었던 newyouk이 값으로 전달된 것을 볼 수 있다.

하지만 접속할 수 없는데, 이유는 아직 서버에 연결이 되지 않아서 그렇다. 포트가 5500임을 확인한다.

 

flask에서 html파일 열기

html파일을 같은 서버에서 열기 위해서 라우팅 경로를 생성해주고

render_template함수를 사용해 login.html파일을 열어준다.

여기서 해당 html파일은 templates폴더 내에 존재해야한다.

이제 다시 html파일을 열어본다.

아까완 다르게 8080포트의 서버에서 html_test의 라우팅 경로에서 html파일이 열린다.

파라미터 값도 제대로 넘어가서 json데이터가 리턴된 것을 확인할 수 있다.