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태그를 사용하여 데이터 전송을 실습해봅시다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

화면 설계

대략적인 화면을 설계해보았습니다.

화면 구현

설계를 토대로 페이지를 생성하였습니다.

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

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
20	[nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함	졸리운_곰	2025.12.12	501
19	[node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동)	졸리운_곰	2024.03.17	300
18	[node.js 개발] PM2로 Node.js 앱 프로세스 배포하기	졸리운_곰	2024.03.16	405
17	[node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기	졸리운_곰	2024.03.16	517
16	[node.js 응용] Next.js : Next.js14에 Mysql연결하기	졸리운_곰	2024.03.03	379
15	[node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법	졸리운_곰	2024.02.28	428
14	[node.js 응용] NodeJS 에서 mqtt 사용하기	졸리운_곰	2024.02.23	399
13	[node.js 응용] Next.js 기본 개념정리	졸리운_곰	2024.02.23	432
12	[node.js 응용] ejs 사용설명서	졸리운_곰	2023.11.25	371
11	[node.js 응용] Build a Node.js Proxy Server in Under 10 minutes!	졸리운_곰	2023.05.07	468
10	[node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기	졸리운_곰	2023.04.25	407
9	[node.js 응용] Node.js \| MySQL과 연동(mysql모듈) - CRUD 2/2	졸리운_곰	2023.03.31	231
8	[node.js 응용] Node.js \| MySQL과 연동(mysql모듈) - CRUD 1/2	졸리운_곰	2023.03.31	484
7	[node.js 응용] PM2 - Node.js 프로세스 관리 도구	졸리운_곰	2021.12.10	410
6	[node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기	졸리운_곰	2021.10.11	484
5	[node.js][typescript] 5분 안에 보는 TypeScript	졸리운_곰	2021.07.03	428
4	Getting started with RabbitMQ and Node.js	졸리운_곰	2019.05.09	466
3	[Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리	졸리운_곰	2019.05.09	352
2	node.js 서버 장애시 자동 재시작 설정 [forever 사용]	졸리운_곰	2019.01.24	884
1	Express 앱용 프로세스 관리자	졸리운_곰	2018.10.16	603

첫 페이지 1 끝 페이지

쓰기

태그