1. data
=> AJAX 요청으로부터 반환된 데이터이다.
=> 문자열 또는 XML 등의 형식이다.
=> 데이터를 꺼내려면 DOM 또는 JavaScript를 사용해야 한다.
2. $(data)
=> jQuery 함수 $()를 사용하여 데이터를 jQuery 객체로 변환하는 것이다.
=> AJAX로 가져온 데이터를 jQuery 객체로 변환하여 jQuery 함수를 사용할 수 있게 한다.
(1) $.ajax()
$.ajax({
url: "XML파일의 URL",
type: "get / post",
data: "파라미터 문자열 key=value&key=value", -- 서버로 보내는 데이터
key = value&key=value", -- 공백X
{"변수": "값1", "변수": "값2"}
dataType: "xml", -- 서버로부터 반환되는 데이터타입(안 써도된다.)
success: function(data) { -- 200 (OK) -- data부분을 빼면 서버로부터 오는 데이터가 없다는 뜻
... 통신이 성공한 경우 실행되는 함수 ...
},
error: function(err){} -- 400(잘못된 요청 - 클라이언트 측 오류),
401(인증되지 않음),
403(권한 없음.),
404(요청한 자원을 찾을 수 없음),
500(서버 내부 오류)
});
(2) $.get() / $.post()
$.get("url", {파라미터 json}, function(data) {
... XML 데이터의 처리 ...
}, ["xml"]);
예)
var ajax = $.get("url", {파라미터 json}, function(data) {...XML 데이터의 처리...}, ["xml"]);
(3) ajax.fail() / ajax.always()
ajax.fail(function() {
// 404, 500 에러 등이 발생한 경우 실행될 내용
});
ajax.always(function() { -- 자바의 finally와 똑같은 기능
// 통신 성공, 실패 여부에 상관없이 무조건 마지막에 호출됨
});
아이디 중복검사
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
#idDiv {
color: red;
font-size: 9pt;
font-weight: bold;
padding-top: 10px;
padding-left: 5px;
}
</style>
</head>
<body>
<h1 class="title">아이이 중복검사</h1>
<div class="exec">
<form>
<input type="text" name="user_id"/>
<input type="button" id="checkId" value="중복검사"/>
<div id="idDiv"></div>
</form>
</div>
<div class="console"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#checkId').click(function(){
$('#idDiv').empty(); //초기화하는 과정 필수
user_id = $('input[name="user_id"]').val();
if(!user_id){
//alert("아이디를 입력하세요.");
$('#idDiv').html("아이디를 입력하세요.");
$('input[name="user_id"]').focus();
return false;
}
});
});
</script>
</body>
</html>
$.get('../checkId/checkId.jsp',
{'user_id': user_id }, //변수이름: 값
function(data){
});
checkId.jsp 테스트 해보기 (아직 DB와 연동이 되지 않았기 때문에 임의로 데이터 넣어서 조건문 실행함)
String user_id = "hong2";
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %><%-- XML 태그 시작 전의 공백 제거 --%>
<%
//JAVA 구역(HTML 안에서)
//String user_id = request.getParameter("user_id");
String user_id = "hong2";
//DB 연동 구역
//만약에 지금 id가 "hong"이라면 DB에 이미 저장된 id인 경우 => 사용 불가능
// "hong"이 아니면 사용 가능
boolean result = false;
if(user_id.equals("hong")){
result = true;
}
%>
<?xml version="1.0" encoding="UTF-8"?>
<check_id>
<result><%=result %></result>
</check_id>
jsp 파일만 실행시켰을 때 이렇게 false로 뜨는 것을 확인할 수 있다.
exam03.html - $.get('../checkId/checkId.jsp',
$.get('../checkId/checkId.jsp',
{'user_id': user_id }, //변수이름: 값
function(data){
console.log(data);
console.log($(data));
let result_text = $(data).find('result').text(); //"true" or "false"
//문자열 => boolean 변환, "true" => true
let result = eval(result_text);
if(result)
$('.console').html('<span style="color: red; font-weight: bold;">이미 사용 중인 아이디입니다.</span>')
else
$('.console').html('<span style="color: blue; font-weight: bold;">사용 가능한 아이디입니다.</span>')
});
jsp파일에서 text로 true false를 받아오므로
eval( ) 함수 이용해서 boolean값으로 바꿔줘야 한다.
check.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %><%-- XML 태그 시작 전의 공백 제거 --%>
<%
//JAVA 구역(HTML 안에서)
//String user_id = request.getParameter("user_id");
String user_id = "hong2";
//DB 연동 구역
//만약에 지금 id가 "hong"이라면 DB에 이미 저장된 id인 경우 => 사용 불가능
// "hong"이 아니면 사용 가능
boolean result = false;
if(user_id.equals("hong")){
result = true;
}
%>
<%-- XML보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<check_id>
<result><%=result %></result>
</check_id>exam03.html - $.get('../checkId/checkId_ JSTL.jsp',
$.get('../checkId/checkId_JSTL.jsp',
{'user_id': user_id }, //변수이름: 값
function(data){
console.log(data);
console.log($(data));
let result_text = $(data).find('result').text(); //"true" or "false"
//문자열 => boolean 변환, "true" => true
let result = eval(result_text);
if(result)
$('.console').html('<span style="color: red; font-weight: bold;">이미 사용 중인 아이디입니다.</span>')
else
$('.console').html('<span style="color: blue; font-weight: bold;">사용 가능한 아이디입니다.</span>')
});checkId_JSTL.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="result" value="false" />
<c:if test="${param.user_id == 'hong'}">
<c:set var="result" value="true" />
</c:if>
<%-- XML보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<check_id>
<result>${result}</result>
</check_id>
* trimDirectiveWhitespaces 속성
jsp에서 서블릿이나 EL을 이용할 경우 로딩된 페이지에서 소스보기를 해 보면 공백으로 표기가 된다.
trimDirectiveWhitespaces 속성을 true로 할 경우 해당 공백을 모두 제거해 준다.
checkId.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %><%-- XML 태그 시작 전의 공백 제거 --%>
<%
//JAVA 구역(HTML 안에서)
//String user_id = request.getParameter("user_id");
String user_id = "hong2";
//DB 연동 구역
//만약에 지금 id가 "hong"이라면 DB에 이미 저장된 id인 경우 => 사용 불가능
// "hong"이 아니면 사용 가능
boolean result = false;
if(user_id.equals("hong")){
result = true;
}
%>
<%-- XML보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<check_id>
<result><%=result %></result>
</check_id>
1. $.ajax({
url: 'URL',
type: 'POST',
data: 서버로 보내는 데이터,
datatype: 'text' / 'xml' / 'json' 서버로부터 받는 데이터 타입
})
.done(function(data, textStatus, xhr) { });
.fail(function(xhr, textStatus, errorThrown) { });
.always(function(data|xhr, textStatus, xhr|errorThrown) { });
.then(function(data, textStatus, xhr|errorThrown) { });
※ https://string.tistory.com/128 참조
JSP
Java + HTML 섞여있다.
스크립트릿(Scriptlet> <% %>
출력 <%= %>
JSP 안에서 JAVA 코드를 몰아내기 ===> EL/JSTL
=> *js가 필요하다.
${ } -- EL
$.ajax( );
$( )
build path할 필요 없다.
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
color: #333;
}
body {
padding: 20px 30px;
}
#login fieldset {
width: 270px;
padding: 15px;
border: 1px solid #7BAEB5;
position: relative;
}
#login fieldset legend {
display: none;
}
#login label {
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
margin-bottom: 10px;
}
#login input[type='text'], #login input[type='password'] {
border: 1px solid #ccc;
padding: 3px 10px;
width: 150px;
vertical-align: middle;
font-size: 12px;
line-height: 150%;
}
#login input[type='submit'] {
width: 270px;
height: 20px;
}
.active {
border: 1px solid #f00 !important;
background-color: skyblue;
}
#login {
position: relative;
}
#login fieldset .loader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
#login .loader img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}
</style>
</head><body>
<form id="login">
<fieldset>
<legend>로그인</legend>
<div>
<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" />
</div>
<div>
<label for="user_password">비밀번호</label>
<input type="password" name="user_password" id="user_password" />
</div>
<div>
<input type="submit" value="로그인" />
</div>
<div class="loader">
<img src="../image/loader.gif" />
</div>
</fieldset>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#user_id, #user_password').bind({
'focus': function(){
$(this).addClass('active');
},
'blur': function(){
$(this).removeClass('active');
},
});
});
</script>
$('#login').bind('click', function(){
$('#idDiv').empty(); //초기화하는 과정 필수
$('#pwdDiv').empty();
user_id = $('input[name="user_id"]').val();
user_password = $('input[name="user_password"]').val();
if(!user_id){
$('#idDiv').html('아이디를 입력하세요.');
$('input[name="user_id"]').focus();
return false;
}
if(!user_password){
$('#pwdDiv').html('비밀번호를 입력하세요.');
$('input[name="user_password"]').focus();
return false;
}
});
$('#login .loader').show();
2. $(this).serialize()
- 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩한다.
- 표준 URL-encoded 표기법으로 텍스트 문자열을 만든다.
- 폼 요소 집합을 표현하는 jQuery 객체를 이용한다.$('form').submit(
function() {
alert($(this).serialize());
return false;});
- 표준형태의 쿼리스트링을 만든다.
=> a=1&b=2&c=3&d=4
$.post('../login/login.jsp',
// {'user_id': user_id, 'user_password': user_password},
$(this).serialize(), //name 속성 안 쓰면 안 간다.
function(data){
if(result){
}else{
}
}).fail(function(){
}).always(function(){
});login.jsp 테스트해보기
String user_id = "hong";
String user_password = "111";
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
//JAVA 구역
//String user_id = request.getParameter("user_id");
//String user_password = request.getParameter("user_password");
String user_id = "hong";
String user_password = "111";
//DB 연동 구역
//아이디: hong, 비밀번호: 111 ===> 로그인 성공
boolean result = true;
String message = "안녕하세요 홍길동님";
if(!user_id.equals("hong")){
result = false;
message = "가입되지않은 아이디입니다.";
}else if(!user_password.equals("111")){
result = false;
message = "비밀번호가 틀렸습니다.";
}
/* boolean result = false;
if(user_id.equals("hong") && user_password.equals("111")){
result = true;
} */
%>
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<login>
<result><%=result%></result>
<message><%=message%></message>
</login>
String user_id = "hong";
String user_password = "123";
String user_id = "hong2";
String user_password = "111";
exam04.html - $.post('../login/login.jsp',
아이디: hong / 비밀번호: 111
$.post('../login/login.jsp',
// {'user_id': user_id, 'user_password': user_password},
$(this).serialize(), //name 속성 안 쓰면 안 간다.
function(data){
let message = $(data).find('message').text();
alert(message);
}).fail(function(){
}).always(function(){
$('#login .loader').hide();
});
});
exam04.html - $.post('../login/login_JSTL.jsp',
$.post(//'../login/login.jsp',
'../login/login_JSTL.jsp',
// {'user_id': user_id, 'user_password': user_password},
$(this).serialize(), //name 속성 안 쓰면 안 간다.
function(data){
let message = $(data).find('message').text();
alert(message);
}).fail(function(){
}).always(function(){
$('#login .loader').hide();
});
return false;
});login_JSTL.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="result" value="true" />
<c:set var="messsage" value="안녕하세요 홍길동님" />
<c:if test="${param.user_id != 'hong'}">
<c:set var="result" value="false" />
<c:set var="messsage" value="가입되지 않은 아이디입니다." />
</c:if>
<c:if test="${param.user_password != '111'}">
<c:set var="result" value="false" />
<c:set var="messsage" value="비밀번호가 틀렸습니다." />
</c:if>
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<login>
<result>${result}</result>
<message>${messsage}</message>
</login>
exam05.html
<!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><body>
<div id="container">
<h1>jQuery Comment</h1>
<div id="comment_write">
<form id="comment_form">
<input type="text" name="num" id="num" value="" readonly/>
<input type="text" name="datetime" id="datetime" value="" readonly/>
<div>
<label for="writer">작성자</label>
<input type="text" name="writer" id="writer" />
<input type="submit" value="저장하기" />
<div id="writerDiv"></div>
</div>
<div>
<label for="content">댓글 내용</label>
<textarea name="content" id="content"></textarea> <!-- textarea는 공간을 띄어두면 안된다. -->
<div id="contentDiv"></div>
</div>
</form>
</div>
<!-- 동적 요소 -->
<ul id="comment_list"></ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {});
</script>
</body>
</html>
<script type="text/javascript">
let num = 3; //전역변수
$(function () {
let num = 3; //지역변수
});
</script>
data-*
- data- 로 시작하는 속성은 Custom Data Attributes 라고 html5에서 새롭게 추가된 속성이다.
말 그대로 사용자 정의 데이터 속성이다.
- 특별한 기능보다는 html5 element의 데이터를 의미 있게 표현할 수 있는 속성이다.
- html5에서 추가된 태그로는 콘텐츠의 아주 디테일한 의미까지 정의하기 힘들므로
data- 속성으로 의미를 구체화 하시오.. 이런 의미로 보면 된다.
- CSS 입장에서는 id와 class 외에 속성값으로 접근하는 수단이 늘어난 것이다.
- jQuery에서도 .data()를 이용해 접근 가능하다.
예]
<li class="user" data-name="홍길동" data-city="Seoul" data-car="sm6">
<strong>홍길동:</strong> <span>안녕하세요</span>
</li>
CSS에서 사용
<style type="text/css">
[data-name] { color: red; }
</style>
jQuery에서 .data()를 이용해 접근
- 데이터를 가져올 때,
$(".user").data("name") -- 홍길동
- 데이터를 설정할 때,
$(".user").data("name", "고길동");
//let num = $(this).parents('li').attr('data-num');
let num = $(this).parents('li').data('data-num');
<script type="text/javascript">
function addItem(num, writer, content, datetime) {
//<li data-num="" class="comment_item"></li>
let new_li = $('<li />');
new_li.attr('data-num', num);
new_li.addClass('comment_item');
//<p class="writer"></p>
let writer_p = $('<p/>');
writer_p.addClass('writer');
//<span class="name">~~~님</span>
var name_span = $('<span/>');
name_span.addClass('name');
name_span.html(writer + '님');
//<span> / datatime</span>
var date_span = $('<span/>');
date_span .html(' / ' + datetime + ' ');
//<input type="button" value="삭제하기" class="delete_btn">
var del_input = $('<input/>');
del_input.attr({
'type': 'button',
'value': '삭제하기'
});
del_input.addClass('delete_btn');
//<p>~~~</p>
var content_p = $('<p/>');
content_p.html(content);
writer_p.append(name_span).append(date_span).append(del_input);
new_li.append(writer_p).append(content_p);
$('#comment_list').append(new_li);
}
function getToday(){
let date = new Date();
let yy = date.getFullYear();
let mm = date.getMonth()+1;
let dd = date.getDate();
let hh = date.getHours();
let mi = date.getMinutes();
let ss = date.getSeconds();
//한 자릿수일 때 앞에 '0'을 추가하여 두 자릿수로 만드는 것
if(mm < 10)
mm = '0' + mm;
if(dd < 10)
dd = '0' + dd;
if(hh < 10)
hh = '0' + hh;
if(mi < 10)
mi = '0' + mi;
if(ss < 10)
ss = '0' + ss;
var today = yy + '-' + mm + '-' + dd + '' + hh + ':' + mi + ':' + ss;
return today;
}
</script>CDATA Section
- <![CDATA[.....]]>
- CDATA Section 영역 안에서는 특수문자의 사용이 자유롭다.
- 한글을 포함한 문자열 데이터에 사용할 수 있다.
나중에 select * from where age < 20 이런 경우에 < 를 태그로 받아들일 수 있다.
<!<[CDATA[ SELECT * FROM 테이블 WHERE AGE < 20 ] ]>
그래서 MyBatis 이런데서 자주 사용하는 기호이다.
<script type="text/javascript">
let num = 3; //전역변수
$(function () {
//목록
$.get('../comment/comment_list.xml', {}, function(data){});
//저장
//삭제
});
</script>comment_list.xml 로 빈손으로 간다.
comment_list.xml
<?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>
item이 3개
- 목록
$(function () {
//목록
$.get('../comment/comment_list.xml', {}, function(data){
$(data).find('item').each(function(){
let num = $(this).find('num').text();
let writer = $(this).find('writer').text();
let content = $(this).find('content').text();
let datetime = $(this).find('datetime').text();
addItem(num, writer, content, datetime); //호출
});//each
}).fail(function(){
alert('댓글 목록을 불러오는데 실패하였습니다.')
});
- 저장
- $.post('../comment/comment_writer.jsp',
//저장
$('#comment_form').submit(function(){
$('#writerDiv').empty();
$('#contentDiv').empty();
if(!$('#writer').val()){
$('#writerDiv').html('작성자를 입력하세요.');
$('#writer').focus();
return false;
}
if(!$('#content').val()){
$('#contentDiv').html('댓글내용을 입력하세요.');
$('#content').focus();
return false;
}
return false;
});
$.post('../comment/comment_writer.jsp',
$('#comment_form').serialize(),
function(data){
})
.fail(function(){
alert('댓글을 저장하는데 실패하였습니다.')
});comment_writer.jsp 에 #comment_form에 있는 데이터를 들고간다.
comment_writer.jsp
- num을 여기서 생성했을 때
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.Date" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%!
//전역변수
int num = 3;
%>
<%
//Java 구역
String writer = request.getParameter("writer");
String content = request.getParameter("content");
num++; //4
Date date = new Date(); //Java 객체
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
String datetime = sdf.format(date);
boolean result = true;
String message = "댓글이 작성되었습니다.";
%>
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<comment>
<result><%=result%></result>
<message><%=message%></message>
<item>
<num><%=num%></num>
<writer><%=writer%></writer>
<content><%=content%></content>
<datetime><%=datetime%></datetime>
</item>
</comment>- 수정된 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.Date" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%
//Java 구역
String num = request.getParameter("num");
String writer = request.getParameter("writer");
String content = request.getParameter("content");
String datetime = request.getParameter("datetime");
boolean result = true;
String message = "댓글이 작성되었습니다.";
%>
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<comment>
<result><%=result %></result>
<message><%=message %></message>
<item>
<num><%=num %></num>
<writer><%=writer %></writer>
<content><%=content %></content>
<datetime><%=datetime %></datetime>
</item>
</comment>XML 보냈으니 이제 받아야한다~
$.post('../comment/comment_writer.jsp',
$('#comment_form').serialize(),
function(data){
//"true" => true
let result = eval($(data).find('result').text());
if(result){
alert($(data).find('message').text());
let num = $(data).find('num').text();
let writer = $(data).find('writer').text();
let content = $(data).find('content').text();
let datetime = $(data).find('datetime').text();
addItem(num, writer, content, datetime) //호출
}//if
})
.fail(function(){
alert('댓글을 저장하는데 실패하였습니다.')
});
초기화 과정 시켜주기
//초기화 과정
$('#writer').val('');
$('#content').val('');
전역변수 num의 값이 초기화되지 않고 계속 증가된다.
[ num이랑 datetime부분 수정]
exam05.html
$('#num').val(++num);
$('#datetime').val(getToday);comment_writer.jsp
<%
//Java 구역
String num = request.getParameter("num");
String writer = request.getParameter("writer");
String content = request.getParameter("content");
String datetime = request.getParameter("datetime");
boolean result = true;
String message = "댓글이 작성되었습니다.";
%>exam05.html - $.post('../comment/comment_writer_JSTL.jsp',
$.post('../comment/comment_writer_JSTL.jsp',
$('#comment_form').serialize(),
function(data){
//"true" => true
let result = eval($(data).find('result').text());
if(result){
alert($(data).find('message').text());
let num = $(data).find('num').text();
let writer = $(data).find('writer').text();
let content = $(data).find('content').text();
let datetime = $(data).find('datetime').text();
addItem(num, writer, content, datetime) //호출
//초기화 과정
$('#writer').val('');
$('#content').val('');
}//if
})
.fail(function(){
alert('댓글을 저장하는데 실패하였습니다.')
});<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="num" value="${param.num }" />
<c:set var="writer" value="${param.writer }" />
<c:set var="content" value="${param.content }" />
<c:set var="datetime" value="${param.datetime }" />
<c:set var="result" value="true" />
<c:set var="message" value="댓글이 작성되었습니다." />
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<comment>
<result>${result}</result>
<message>${message}</message>
<item>
<num>${num}</num>
<writer>${writer}</writer>
<content>${content}</content>
<datetime>${datetime}</datetime>
</item>
</comment>똑같이 결과 나옴.
삭제할 때 이부분이 날라가야된다는 것을 확인
- 삭제
//삭제 - 동적 처리
//$(조상).on('이벤트', '후손')
$(document).on('click', '.delete_btn', function(){
if(confirm('선택하신 항목을 삭제하시겠습니까?')){
//let num = $(this).parents('li').attr('data-num');
let num = $(this).parents('li').data('data-num');
let target = $(this).parents('.comment_item');
$.post('../comment/comment_delete.jsp', {'num' : num}, function(data){
let result = eval($(data).find('result').text());
if(result){
alert($(data).find('message').text());
target.remove(); //DB에서 삭제하는 것이 아니다.
}
}).fail(function(){
alert('댓글 삭제하는데 실패하였습니다.')
});
}//if
});comment-delete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
String num = request.getParameter("num");
//고유한 값인 num을 들고 DB에가서 삭제하기
boolean result = true;
String message = "댓글이 삭제되었습니다.";
%>
<%-- XML 보내기 --%>
<?xml version="1.0" encoding="UTF-8"?> <%-- DTD부분--%>
<commment>
<result><%=result %></result>
<message><%=message %></message>
</commment>
'HTML CSS JS' 카테고리의 다른 글
| DAY 41 - JSON / Bootstrap (2024.08.29) (1) | 2024.09.02 |
|---|---|
| DAY 41 - JSON / Bootstrap (2024.08.29) (0) | 2024.08.29 |
| DAY 39 - jQuery / jQueryAJax (2024.08.27) (0) | 2024.08.27 |
| DAY 38 - jQuery (2024.08.26) (0) | 2024.08.26 |
| DAY 37 - jQuery (2024.08.23) (0) | 2024.08.23 |
