| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- 인공지능
- WebGL
- 김양재 목사님
- 빅데이터
- No SQL
- probability
- 우리들교회
- 딥러닝
- Deep learning
- Artificial Intelligence
- 빅 데이터
- 주일설교
- openCV
- MongoDB
- 확률
- nodeJS
- c++
- 빅 데이타
- 데이터 과학
- 몽고디비
- Big Data
- 김양재
- 빅데이타
- Machine Learning
- Statistics
- 김양재 목사
- 통계
- R
- data science
- node.js
- Today
- Total
Scientific Computing & Data Science
[WebApp / Express] HTTP GET 방식을 통한 Form 데이터 전송 본문
이번 글에서는 Express Web App에서 GET 방식을 통하여 form의 데이터를 전송하는 방법에 대하여 알아본다.
데이터를 전송하는 HTTP 방식은 주로 GET과 POST가 사용되는데 이 방법에 대하여 비교하면 다음과 같다:
GET |
POST |
Form 데이터가 쿼리 문자열로 전송된다. 즉, 브라우저의 주소창에 쿼리 데이터가 노출된다. |
Form 데이터가 HTTP body로 전송된다. 따라서, 브라우저의 주소창에 서 쿼리가 보이지 않는다. |
전송가능한 데이터가 제한적이다. |
이론적으로 전송가능한 데이터에 제한이 없다. |
파일 업로드에 사용될 수 없다. |
파일 업로드에 사용 가능하다. |
추가 로직없이는 form을 다루는데 있어 동일한 URL을 사용할 수 없다. |
post() 메써드를 이용하여 별도의 route를 정의함으로써 form을 다 루는데 있어 동일한 URL을 사용할 수 있다. |
HTML 정의
EJS 템플릿 엔진을 사용하여 다음과 같이 HTML에 form을 정의한다.
[{EXPRESS_APP_ROOT}/views/submit.ejs]
JavaScript 정의
JavaScript 파일을 다음과 같이 정의한다.
[{EXPRESS_APP_ROOT}/routes/submit.js]
app.js에 다음 코드를 추가한다.
[{EXPRESS_APP_ROOT}/app.js]
Result
NodeJS server를 실행하면 다음과 같은 화면을 볼 수 있다.
Name 창에 아무 문자열을 입력하고 [Search] 버튼을 클릭하거나 엔터를 입력하면 아래 이미지와 같이 주소창에 쿼리가 노출된 것을 확인할 수 있다.
한편 Terminal에서도 다음과 같은 로그를 확인할 수 있다.
'Programming > Web App' 카테고리의 다른 글
| [WebApp / CreateJS] 간단한 오브젝트 생성 + 터치 무브 + 사운드 재생 (0) | 2015.12.09 |
|---|---|
| [WebApp / Express] HTTP POST 방식을 통한 Form 데이터 전송 (0) | 2015.12.05 |
| [WebApp / Express] ini Parser (0) | 2015.11.12 |
| [Web App / Express] Node.js (Express Framework) 앞단에 Nginx 사용하기 (0) | 2015.11.07 |
| [Web App / Express] Development/Production Mode (0) | 2015.11.07 |
