- 전체
- 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
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 11 | [jQuery] Ajax 기본 사용법 | 졸리운_곰 | 2018.08.03 | 719 |
| 10 | jQuery selector,jQuery 셀럭터, jQuery 선택자 | 졸리운_곰 | 2018.07.29 | 731 |
| 9 |
jQuery 스타일 & 속성 다루기
 | 졸리운_곰 | 2018.07.29 | 790 |
| 8 | Force redraw on an element (jQuery) | 졸리운_곰 | 2018.07.28 | 639 |
| 7 | 자바스크립트에서 변수에 문자열이 있는지 체크 하는 방법 | 졸리운_곰 | 2018.06.05 | 775 |
| 6 | [jQuery] ajax 콜백함수에서 파라메터 패싱 : Pass variable to function in jquery AJAX success callback | 졸리운_곰 | 2018.06.05 | 443 |
| 5 | JQUERY – ON 을 알아보자 | 졸리운_곰 | 2018.06.04 | 450 |
| 4 | 동적으로 생성된 button의 값 가져오기! | 졸리운_곰 | 2018.06.04 | 785 |
| 3 |
jQuery 스타일 & 속성 다루기
| 졸리운_곰 | 2017.08.25 | 597 |
| 2 | remove-innerhtml-from-div 태그 안의 html코드 삭제 | 졸리운_곰 | 2017.07.08 | 633 |
| 1 | [jQuery] Ajax의 흐름과 예제 | 졸리운_곰 | 2017.01.17 | 632 |