- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Javascript & JavaScript Application form 데이터 주고 받기
2018.01.24 11:02
form 데이터 주고 받기
form 태그와 request 객체를 이용하여 데이터를 주고 받아 봅시다.
데이터 전송
웹서비스는 클라이언트와 서버로 구성되어있고, 이들은 요청과 응답이라는 방식으로 통신함을 배웠습니다. 이번 장에서는 클라이언트의 데이터를 웹서버로 전송하는 방법을 알아봅시다.
form 태그의 이해
form 태그는 클라이언트에서 서버로 데이터 전송을 위해 사용합니다. 폼 태그의 대표적인 사용 예로 로그인을 들 수 있습니다. 로그인을 위해 사용자는 아이디와 패스워드 서버로 전송해야 하는데 이때 폼 데이터를 이용합니다.
form 태그는 여러 속성을 가지고 있으나 이중 중요한 것은 아래의 두 속성입니다.
- action: 수신 대상
- method: 전송 방식
<form action="result.jsp" method="post">...</form>
위 코드를 예로 설명하면, form의 수신대상은 result.jsp이고, 전송방식은 post방식입니다. post 방식이란 무엇일까요?
전송방식: GET / POST
form에서의 전송방식은 두가지(GET / POST)가 존재합니다. 데이터를 쪽지에 적어서 보내는 것을 GET 이라고 한다면, POST는 보안가방 안에 데이터 쪽지를 담아서 전달하는 것이라 할 수 있습니다.
두 방식을 간단히 비교하면 아래와 같습니다.
| Method | 속 도 | 보 안 | 전송량 |
|---|---|---|---|
| GET | 빠름 | 없음 | 제한적(255 Bytes) |
| POST | 느림 | 있음 | 제한 없음 |
그럼 form태그를 사용하여 데이터 전송을 실습해봅시다.
화면 설계
대략적인 화면을 설계해보았습니다.
화면 구현
설계를 토대로 페이지를 생성하였습니다.
form.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="utf-8"></head><body><form action="result.jsp" method="post"><label>이름: </label><input name="name" type="text"><br><label>이메일: </label><input name="email" type="text"><br><label>비밀번호: </label><input name="password" type="password"><br><input type="submit" value="전송"></form></body></html>
result.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="utf-8"></head><body><h1>전달받은 데이터</h1><ul><li>이 름: <%= request.getParameter("name") %></li><li>이메일: <%= request.getParameter("email") %></li><li>비밀번호: <%= request.getParameter("password") %></li></ul></body></html>
실행결과
한글파일이 결과화면에 깨져서 나왔네요. (이문제는 추후에..)
핵심 키워드
[출처] http://cloudstudying.kr/lectures/72
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
