잡동사니에도 사랑을

[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces 본문

JAVA_EE/AJAX

[21.10.21] exam05(02_xml) - (개념 정리 : SimpleDateFormat, setCharacterEncoding, trimDirectiveWhitespaces

luvforjunk 2021. 10. 21. 12:54
728x90
반응형

// <style>

더보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
color: #333;
}

ul {
list-style: none;
}

#container {
padding: 30px 20px;
}

h1 {
font-size: large;
border-left: 10px solid #7BAEB5;
border-bottom: 1px solid #7BAEB5;
padding: 10px;
width: auto;
}

#comment_write {
padding: 20px 15px;
border-bottom: 1px solid #7BAEB5;
}

#comment_write label {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}

#comment_write input[type='text'], #comment_write textarea {
border: 1px solid #ccc;
vertical-align: middle;
padding: 3px 10px;
font-size: 12px;
line-height: 150%;
}

#comment_write textarea {
width: 380px;
height: 90px
}

.comment_item {
font-size: 13px;
color: #333;
padding: 15px;
border-bottom: 1px dotted #ccc;
line-height: 150%;
}

.comment_item .writer {
color: #555;
line-height: 200%;
}

.comment_item .writer input {
vertical-align: middle;
}

.comment_item .writer .name {
color: #222;
font-weight: bold;
font-size: 14px;
}
</style>
</head>

</html>

 

 

////////exam05.html

//----------------------중략-----------------------------
<body>
	<div id="container">
		<h1>jQuery Comment</h1>
		<div id="comment_write">
			<form id="comment_form">
				<div>
					<label for="user_name">작성자</label> 
					<input type="text" name="user_name" id="user_name" /> 
					<input type="submit" value="저장하기" />
				</div>
				<div>
					<label for="comment">덧글 내용</label>
					<textarea name="comment" id="comment"></textarea>
				</div>
			</form>
		</div>

	<ul id="comment_list">
	</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
		$(function() {
        
});		
	</script>
</body>

 

 

 

◎ 덧글 목록

더보기

<?xml version="1.0" encoding="UTF-8"?>
<comment>
<result>true</result>
<message></message>
<total_count>24</total_count>
<item>
<num>1</num>
<writer>
          <![CDATA[홍길동]]>
</writer>
<content>
            <![CDATA[Ajax로 구현하는 덧글 예제 입니다. 잘 되는지 볼까요?]]>
</content>
<datetime>
            <![CDATA[2021-03-15 12:21:42]]>
</datetime>
</item>
<item>
<num>2</num>
<writer>
            <![CDATA[라이언]]>
</writer>
<content>
            <![CDATA[jQuery로 Ajax를 구현하면 매우 쉽습니다.]]>
</content>
<datetime>
            <![CDATA[2021-03-15 12:21:42]]>
</datetime>
</item>
<item>
<num>3</num>
<writer>
            <![CDATA[프로도]]>
</writer>
<content>
            <![CDATA[Hello jQuery~ Hello Ajax~]]>
</content>
<datetime>
            <![CDATA[2021-03-15 12:21:42]]>
</datetime>
</item>
</comment>

<!-- 
CDATA Section
- <![CDATA[.....]]> 
- CDATA Section 영역 안에서는 특수문자의 사용이 자유롭다.
- 한글을 포함한 문자열 데이터에 사용할 수 있다.
 -->

 

 

다시 html파일로 넘어와

 

 

◎ 덧글 저장

////////comment_write.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.Date"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page trimDirectiveWhitespaces="true"%>

<%!
//1번만 처리, 전역변수
int num = 3;
%>

<%
// 요청할 때마다 처리, 지역변수
request.setCharacterEncoding("UTF-8");
String user_name = request.getParameter("user_name");
String comment = request.getParameter("comment");

Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String datetime = sdf.format(date);

num++;
boolean result = true;
String message = "덧글이 등록되었습니다";
%>

<?xml version="1.0" encoding="UTF-8"?>
<comment> 
	<result><%=result%></result> 
	<message><%=message%></message>
	<item> 
		<num><%=num%></num> 
		<writer><%=user_name%></writer> 
		<content><%=comment%></content>
		<datetime><%=datetime%></datetime> 
	</item> 
</comment>

 

*주요 내용 :

→ SimpleDateFormat : 현재 시각이나 어떤 시각을 특정 형식으로 맞추어 출력하거나, String으로 변환해야 할 때 사용한다

→ request.setCharacterEncoding("UTF-8") : 

.jsp / .html 파일 Form 태그에서 입력한 값을 전송할 때는 Get방식 혹은 Post방식을 사용해 파일을 전송하는데,

Post로 보내는 값이 '한글'일 경우 깨지지 않게 전달하기 위해 사용한다.

하지만 Get방식일 경우엔 톰캣이 기본적으로 UTF-8 문자코드가 적용이 되어 자동으로 한글처리를 해주기 때문에 한글이 깨지지 않는다.

 

request.setCharacterEncoding("UTF-8") 외

response.setCharacterEncoding("UTF-8") 과 response.setContentType("text/html; charset=utf-8") 에 관한 설명 ↓

https://cbw1030.tistory.com/62
 

(Servlet/JSP) setCharacterEncoding, setContentType 정리

JSP와 서블릿 공부를 하면서 항상 헷갈렸던 내용이 있다. request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=utf-8"); 이번 포스팅..

cbw1030.tistory.com

 

 

→ <%@ page trimDirectiveWhitespaces="true"%> : 

jsp에서 서블릿이나 EL을 이용 시 로딩된 페이지에서 소스를 보면 공백으로 표기가 된다.

이때 trimDirectiveWhitespaces를 쓰며, true로 표기할 경우 해당 공백을 모두 제거해준다.만약 공백이 있는 경우, DOCTYPE, xml 반환 페이지에서 인식하지 않는 경우가 있어 기본적으로 적용하는 게 좋다.

 

적용 방법

1) jsp에서 <%@ page trimDirectiveWhitespaces="true"%> 직접 선언

2) web.xml에 jsp-comfig 값으로 추가

 

 

다시 html파일로 넘어와

 

*주요 내용 :

JQuery serialize(직렬화)란?

Ajax는 비동기식이므로 데이터를 직렬화하여 전송해야 한다.

Serialize(직렬화)는 jQuery 기본 문법 중 하나로, 입력받은 여러 데이터를 하나의 쿼리 문자열로 만들어주며,

입력받은 데이터를 한번에 서버로 보낼 수 있다.

 

jQuery에선 <form>태그의 요소를 대상으로 하며,

메소드는 두 가지, .serialize()와 .serializeArray()가 있다.

.serialize()는 <form>태그의 요소를 통해 입력된 데이터를 쿼리 문자열로 변환한다.

.serializeArray()는 serialize()와 달리 입력된 데이터를 문자열이 아닌 배열로 변환한다.

ajax에 data값을 세팅할 때 사용하면 해당 Form의 모든 값을 쉽게 받을 수 있다.

 

 

 

◎ 덧글 삭제

 

////////comment_delete.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>

<% 
int num = Integer.parseInt(request.getParameter("num"));

//DB 연동할 때는 여기서 하면 된다

boolean result = false;
String message = "덧글 삭제에 실패하였습니다";

if(num != 0) {
	result = true;
	message = "덧글이 삭제되었습니다";
}

%>

<?xml version="1.0" encoding="UTF-8"?>
<comment>
	<result><%=result %></result>
	<message><%=message %></message>
</comment>

 

 

다시 html파일로 넘어와

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.25] exam02(03_json) - JSON 배열  (0) 2021.10.25
[21.10.25] exam01(03_json) - JSON 개념 정리 및 예제  (0) 2021.10.25
[21.10.20] exam04(02_xml)  (0) 2021.10.20
[21.10.20] exam03(02_xml)  (0) 2021.10.20
[21.10.20] exam02(02_xml)  (0) 2021.10.20
'JAVA_EE/AJAX' Related Articles more