티스토리 뷰
2024.04.08 _ JSP Servlet ( form형태 get/post 데이터 처리 방식 ) , JSON, JSTL, AJAX
Ji@n 2024. 4. 8. 18:24
JSP Servlet - form
jsp에서 form 형태로 보내면 servlet에서
request.getParameter() 로 꺼낸다
* cilent -> server ( request.getParameter()메서드를 사용한다 )
*두 가지 방식(GET or POST)으로 데이터를 처리할 때,
request.getParameter() 메서드를 사용하는데, 단 전송방식에 따라 데이터가 서버로 전송되는 방식이 다른다.
GET 방식 : 데이터가 url의 query String으로 전송된다. 전송되는 데이터가 보임!
POST 방식 : 데이터가 http 요청 본문(body)에 포함되어 전송된다. 전송되는 데이터가 안보임!
일단
form 형식이면 getParameter 로 꺼낸다고 생각하면 된다.
<title>테스트</title>
</head>
<body>
<h2>이름/나이 입력</h2>
<!-- POST 방식으로 result.jsp에 데이터를 전송 -->
<form action="result.jsp" method="post">
<p>이름</p>
<input type="text" name="name" placeholder="이름 입력">
<p>나이</p>
<input type="text" name="age" placeholder="나이 입력">
<br><br>
<input type="submit" value="전송">
</form>
</body>
</html>
POST 방식으로 result.jsp로 데이터 전송하기
<input name="parameter 이름">
전송할 데이터를 인식하는 parameter 이름 -> 꺼낼때도 .getParameter()
<input value="전송할 값">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과확인</title>
</head>
<body>
<!-- request 내장 객체를 이용한 데이터 출력 -->
이름 : <%=request.getParameter("name") %><br>
나이 : <%=request.getParameter("age") %><br>
</body>
</html>
한글 인코딩
request.setCharacterEncoding("UTF-8");
String getParameter(String name)
request는 form에서 전송된 데이터를 불러오는 parameter를 제공
request 객체에 Form Data가 저장되고, getParameter()로 데이터 참조
* parameter와 attribute
- parameter와 attribute는 비슷한 기능을 수행
parameter: html form 태그를 통해 전송을 수행
attribte: setAttribute를 통해 전송을 수행
차이점 :
- parameter는 String 타입만 전송 가능
- attribute는 Object 타입의 데이터로 전송 가능
- parameter는 request 객체에만 존재하고,
client에서 server로 데이터를 전송할 때, 사용 (client ---> server)
- attribute는 주로 server 데이터를 client로 전송할 때, 사용 (server ---> client)
Client -> Server
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
</head>
<body>
<form action="register" method="POST">
<p>아이디</p>
<!-- input name = request parameter의 name -->
<input type="text" name="userId" placeholder="아이디 입력"
required="required">
<p>패스워드</p>
<input type="password" name="password" placeholder="비밀번호 입력"
required="required">
<p>이메일</p>
<input type="email" name="email" placeholder="이메일 입력"
required="required">
<p>이메일 수신여부</p>
<input type="radio" name="emailAgree" value="yes">예 <input
type="radio" name="emailAgree" value="no" checked="checked">아니오
<p>자기소개</p>
<textarea rows="4" cols="30" name="introduce" placeholder="자기소개 입력"
required="required"></textarea><br>
<input type="submit" value="전송">
</form>
</body>
</html>
client -> server 보내기
register.jsp : url 경로가 register인 servlet으로 데이터를 전송하는 JSP
< form action="register" > : 현재 jsp 파일의 위치는 /ch15/member
register.jsp 경로는 /ch15/member/register 경로로 인식
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// register.jsp에서 전송된 데이터를 수신하는 역할
// register.jsp form 요청 url과 매칭
@WebServlet(name="boardRegister" , urlPatterns = "/ch15/member/register")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public RegisterServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
// register.jsp의 form method="post"이므로 doPost() 호출
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// form에서 보낸 Form Data는 request 객체에 저장되어 있음
// request parameter로 데이터 참조
// request.getParameter(); 쓸건데 String 타입이므로 아래처럼 쓸거임
// getParameter name = input name과 동일
String userId = request.getParameter("userId"); // register의 name(key 값)값과 parameter값이 같아야함
String password = request.getParameter("password");
String email = request.getParameter("email");
String emailAgree = request.getParameter("emailAgree");
String introduce = request.getParameter("introduce");
//DB 연결 생략
System.out.println("userId =" + userId);
System.out.println("password =" + password);
System.out.println("email =" + email);
System.out.println("emailAgree =" + emailAgree);
System.out.println("introduce =" + introduce);
}
}
JSTL
JSTL(JSP Standard Tag Library)
- JSP 태그의 경우 HTML 태그의 가독성을 떨어트림
- 이를 해결하기 위해 JSTL을 사용
- JSP의 다양한 커스텀 태그를 모아놓은 라이브러리
- 반복, 조건, SQL 등 다양한 기능을 사용
* JSTL Tag
- core : 변수 지원, 흐름 제어, URL 처리 등. 접두어 - c
- xml : xml 코어, 흐름 제어, xml 변환. 접두어 - x
- 데이터 베이스 : SQL. 접두어 - SQL
* JSTL 라이브러리 추가
- http:// tomcat.apache.org/taglibs/standard/ 접속
- version standard 1.1 Getting the Taglib download 링크 클릭
- binaries/jakarta-taglibs-standard-1.1.2 zip 다운로드
- jakarta-taglib-standard-1.1.2/lib 경로의 jstl.jar,
standard.jar 파일을 해당 프로젝트의 WEB-INK/lib 폴더에 저장
- 필요한 taglib을 url로 지정
JSON
* JSON(JavaScript Object Notation)
- 데이터 전송을 위한 표준 데이터 포맷
- 데이터를 저장하고 교환하기 위한 문법
- JSON은 텍스트이며, 자바스크립트 객체 표기 방식과 형식이 유사
- 자바스크립트 객체를 JSON으로 변환 가능하며, JSON을 서버(JAVA)로 전송 가능
- 서버(JAVA)에서 받아온 JSON을 자바스크립트 객체로 변환 또한 가능
=> 서버(JAVA)와 클라이언트(JavaScript) 언어가 달라서 형식을 맞춰주려고 JSON을 사용!
- 기본적으로 자바스크립트 객체 문법과 비슷함
* JSON을 사용하는 이유
- 자바스크립트 객체 표기법의 표준
- 경량 데이터 교환 형해
- 이해하기 쉬움
- 언어 독립적(JSON 형태는 텍스트이므로, 모든 언어에서 읽을 수 있음)
*
JSON은 API 응답을 전달하고 클라이언트와 서버 간 데이터를 교환하는 데 매우 효과적인 형식 :
- OPENAPI ( 카카오맵, 네이버맵 등등 기능을 우리 사이트에서 빌릴 수 있다. ) 에서 사용된다.
또 JSON은 서버 사이드에서 데이터를 가져온 이후에 자바스크립에 업데이트하는 형식
*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Syntax</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
// 자바스크립트 객체 사용
let person = {
name : "mok",
age : 20,
city : "incheon"
};
let str = {"name" : "mok"};
console.log(typeof(person));
console.log(str);
document.getElementById("output").innerHTML += person + '<br>';
document.getElementById("output").innerHTML += str;
</script>
</body>
</html>
* JSON 데이터 타입
- 문자열
- 숫자
- 객체
- 배열
- 논리형
- null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JSON 데이터 타입</h1>
<div id="output"></div>
<script type="text/javascript">
// * JSON 데이터 타입
// - 문자열
// - 숫자
// - 객체
// - 배열
// - 논리형
// - null
// 문자열
let str = {"name" : "mok"};
// 숫자
let num = {"age" : 20};
// 객체
let obj = {
"employee" : {"name" : "mok", "age" : 20, "city" : "서울"}
};
document.getElementById("output").innerHTML += obj + "<br>";
document.getElementById("output").innerHTML += obj.employee.name + "<br>";
document.getElementById("output").innerHTML += obj.employee.age + "<br>";
</script>
</body>
</html>
JSON 데이터 타입
* JSON은 문자열 형태로 데이터가 교환됨
따라서, 전송이 끝난 뒤 사용을 위해서는 원래 타입으로 변경해야 한다.
주로 ajax로 데이터를 통신할 때 사용
웹 서버에서 클라이언트로 데이터를 전송받은 경우(server to client)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON parse</title>
</head>
<body>
<h1>JSON parse</h1>
<div id="output"></div>
<script type="text/javascript">
// * JSON은 문자열 형태로 데이터가 교환됨
// 따라서, 전송이 끝난 뒤 사용을 위해서는 원래 타입으로 변경해야 한다.
// 주로 ajax로 데이터를 통신할 때 사용
// 웹 서버에서 클라이언트로 데이터를 전송받은 경우(server to client)
let txt =
'{"name" : "mok", "age" : 20, "city" : "인천", "birth" : "2024-04-08"}';
console.log(typeof txt);
let obj = JSON.parse(txt); // JSON을 javaScript 객체로 변환
console.log(typeof obj);
console.log(typeof obj.birth);
// 날짜 타입은 변환을 따로 수행해야 함
obj.birth = new Date(obj.birth); // 문자열 -> Date
document.getElementById("output").innerHTML
= obj.name + ', ' + obj.birth;
</script>
</body>
</html>
JSON parse
* JSON.stringify() : 자바스크립트 객체를 문자열로 변환
- 자바스크립트 배열도 JSON 문자열로 변경 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Stringify</title>
</head>
<body>
<h1>JSON Stringify</h1>
<div id="output"></div>
<script type="text/javascript">
// * JSON.stringify() : 자바스크립트 객체를 문자열로 변환
// - 자바스크립트 배열도 JSON 문자열로 변경 가능
var obj = {
name : "mok",
age : 20,
city : "Incheon"
};
var myJSON = JSON.stringify(obj); // JSON 객체(문자열)로 변환
console.log(typeof(myJSON));
document.getElementById("output").innerHTML
= myJSON;
</script>
</body>
</html>
JSON Stringify
AJAX
* Ajax : Asynchronous JavaScript and XML
- Ajax를 사용하는 이유
1) 웹 페이지가 로드된 후 서버에서 데이터를 불러오기 위해
2) 새로고침 없이 페이지를 업데이트
3) 백그라운드에서 웹 서버에 데이터 전송
* XML(Extensible Markup Language)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 기초</title>
</head>
<body>
<!--
* Ajax : Asynchronous JavaScript and XML
- Ajax를 사용하는 이유
1) 웹 페이지가 로드된 후 서버에서 데이터를 불러오기 위해
2) 새로고침 없이 페이지를 업데이트
3) 백그라운드에서 웹 서버에 데이터 전송
* XML(Extensible Markup Language)
-->
<div id="output">
<h2>XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">내용변경</button>
</div>
<script type="text/javascript">
function loadDoc() {
var xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
xhttp.onreadystatechange = function(){
// raedState 속성이 변경될 대 호출할 함수를 정의
if(this.readyState == 4 && this.status == 200){
console.log(this);
document.getElementById("output").innerHTML
= this.responseText;
// this.responseText : 응답 데이터를 문자열로 변환
}
};
xhttp.open("GET", "01_demo_test.txt", true);
// open(method, url, async) : xhttp에 보낼 정보 세팅
// method : 요청 타입 GET or POST
// url : 파일 또는 요청 서버 위치
// async : true(비동기) or false(동기)
xhttp.send();
}//end loadDoc()
</script>
</body>
</html>
이 코드를 실행하면 XMLHttpRequest 객체가 생성되고,
01_demo_test.txt(URL)에 GET 요청이 전송된다.
이 요청은 비동기적으로 수행되므로
JavaScript는 서버로부터 응답을 기다리지 않고 다른 작업을 계속할 수 있다.
// 01_demo_test.txt
<h2>안녕?</h2>
<p id="p1">봄날씨입니당</p>
XMLHttpRequest 요청
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest GET/POST</title>
</head>
<body>
<h2>XMLHttpRequest 요청</h2>
<button type="button" onclick="loadDocGet()">get 데이터 요청</button>
<button type="button" onclick="loadDocPost()">post 데이터 요청</button>
<p id="output"></p>
<script type="text/javascript">
function loadDocGet() {
var xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
xhttp.onreadystatechange = function(){
// raedState 속성이 변경될 대 호출할 함수를 정의
if(this.readyState == 4 && this.status == 200){
console.log(this);
document.getElementById("output").innerHTML
= this.responseText;
// this.responseText : 응답 데이터를 문자열로 변환
}
};
xhttp.open("GET", "02_date.jsp?method=get&content=Hello", true);
// 서버 사이드에서 데이터를 가져온 이후에 자바스크립에 업데이트하는 형식
xhttp.send();
}//end loadDocGet()
function loadDocPost() {
var xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
xhttp.onreadystatechange = function(){
// raedState 속성이 변경될 대 호출할 함수를 정의
if(this.readyState == 4 && this.status == 200){
console.log(this);
document.getElementById("output").innerHTML
= this.responseText;
// this.responseText : 응답 데이터를 문자열로 변환
}
};
xhttp.open("POST", "02_date.jsp", true);
// post는 url 내용이 비공개이므로, send에 내용을 집어 넣는다!
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("method=post&content=Hello");
}//end loadDocGet()
</script>
</body>
</html>
// 02_date.jsp
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% Date date = new Date(); %>
<p>오늘 날짜 : <%=date.toString() %></p>
<p>${param.method }</p>
<p>${param.content }</p>
이 코드는 XMLHttpRequest를 사용하여 GET 및 POST 요청을 보내고,
응답을 받아와서 해당 응답을 페이지의 특정 요소에 삽입하는
JavaScript 함수를 정의한다.
두 개의 함수인 loadDocGet()과 loadDocPost()를 정의했고,
loadDocGet() 함수는 GET 요청을 보내고,
loadDocPost() 함수는 POST 요청을 보낸다.
어떤 요청이든지 서버로부터 응답이 받아지면,
응답 데이터가 페이지의 output 요소에 삽입된다.
비동기 실습 - 글자 추천 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자 추천</title>
</head>
<body>
<h2>아래에 글을 입력해 주세요.</h2>
<p>
첫 글자 : <input type="text" id="txt" onkeyup="showHint(this.value)">
</p>
<p>
추천 : <span id="txtHint"></span>
</p>
<script type="text/javascript">
function showHint(str) {
// get 방식으로 04_get_hint.jsp 페이지에 데이터 전송하고
// 결과를 추천 span에 출력
console.log(str);
if(str.length == 0){ //전송하기 전에 막아놓는 게 제일 좋음!
document.getElementById("txtHint").innerHTML = ""; //공백으로 나온다
return; //종료한다. 아래 코드가 실행이 안됨
}
var xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
xhttp.onreadystatechange = function(){
// raedState 속성이 변경될 대 호출할 함수를 정의
if(this.readyState == 4 && this.status == 200){
// this.responseText : 응답 데이터를 문자열로 변환
console.log(this.responseText);
document.getElementById("txtHint").innerHTML
= this.responseText;
}
};
xhttp.open("GET", "04_get_hint.jsp?str=" + str, true);
// 서버 사이드에서 데이터를 가져온 이후에 자바스크립에 업데이트하는 형식
xhttp.send();
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--
전송된 데이터가
만약 'a'로 시작하면 "apple"
'b'로 시작하면 "banana"
'c'로 시작하면 "coconut"
그게 아니면 "not fruits"를 출력해라!
--%>
<%
String str = request.getParameter("str");
//04_get_hint
System.out.println(str);
String result;
if(str.charAt(0) == 'a'){
result = "apple";
}else if(str.charAt(0) == 'b'){
result = "banana";
}else if(str.charAt(0) == 'c'){
result = "coconut";
}else{
result = "not fruits";
}
%>
<%=result %>'백엔드 교육과정 > 4월' 카테고리의 다른 글
| 2024.04.11_추천 시스템 과제 답안 (0) | 2024.04.11 |
|---|---|
| 2024.04.09 _ SSR & CSR , JQuery_Ajax, 퀴즈 (0) | 2024.04.09 |
| 2024.04.05_ HW4(회원가입 및 로그인 홈페이지) 문제해결 / (0) | 2024.04.05 |
| 2024.04.04 _ HW4(회원가입 및 로그인 홈페이지 만들기) 제출 (문제점 찾기) (0) | 2024.04.04 |
| 2024.04.03_ HW3 과제, Filter , 회원가입 및 로그인 홈페이지 만들기(HW4) (0) | 2024.04.03 |