AJAX (에이작스) 를 이용하여 데이터 전송하기
오늘은 AJAX 를 이용하여 데이터를 사용해보도록 합시다.
간단하게 로그인체크와 게시글을 등록해 봅시다.
우선
main 페이지 스크립트 입니다.
게시판은 ckeditor를 이용하였습니다.
home.jsp 에서 Controller로 보내서 사용하기 입니다.
매우 간단합니다.
우선 home.jsp 입니다.
<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<script src="/resources/static/js/jquery-3.2.1.min.js"></script>
<link href="/resources/static/css/bootstrap.min.css" rel="stylesheet">
<script src="/resources/static/js/bootstrap.js"></script><script>
$(document).ready(function () {
$('#home').click(function () {
$('#notice').removeClass("active");
$(this).addClass("active");
$('#myBoard').hide();
$('.jumbotron').slideDown();
});
$('#notice').click(function () {
$('#home').removeClass("active");
$(this).addClass("active");
$('.jumbotron').slideUp(function () {
$('#myBoard').show();
});
});
$('#login-btn').click(function() {
$.ajax({
type: "POST",
url: "/loginProcessing",
data: { "username" : $('#login-id').val(),
"password" : $('#login-pw').val()},
success: function() {
alert('로그인 성공');
location.reload();
}, error: function() {
alert('로그인 정보가 올바르지 않습니다.');
}
});
});
$('#create').click(function() {
CKupdate();
$.ajax({
type: "POST",
url: "/createBoard",
data: { "title" : $('#title').val(),
"text" : $('#editor').val(),
"id" : $('#adminid').val()},
success: function() {
alert('게시글 등록 성공');
location.reload();
}, error: function() {
alert('게시글 등록 실패');
}
});
});
});
function CKupdate(){
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
}
</script>slideDown 이나 slideUp 은 메뉴를 내리고 올리고 하는 효과입니다.
그아래 ajax를 사용하는 부분을 봐줍시다.
각 id 값에 해당하는 버튼을 클릭했을 경우 이벤트가 발생합니다.
type은 내가 어떻게 보낼 것인지 정해줍니다.
대표적으로 GET, POST 가 있습니다.
url은 데이터를 보낼 Url 주소를 입력합니다.
data는 이제 url 주소로 보낼 데이터들을 작성해줍니다.
"데이터명" : $('#해당아이디값').val() 이런식으로 , ( 콤마 ) 로 구분하여 작성합니다.
다 작성했다면 실행해서 확인해봅시다.
이 페이지는 모달을 주로 이용하기 때문에 모달을 아래와 같이 사용하였습니다.
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h1>로그인</h1><br>
<label for="login-id">아이디</label>
<input class="form-control" type="text" id="login-id" name="username" placeholder="아이디" required="required">
<br/>
<label for="login-pw">암호</label>
<input class="form-control" type="password" id="login-pw" name="password" placeholder="비밀번호" required="required">
<br/>
<button type="button" id="login-btn" name="login" class="btn btn-default">로그인</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="board-modal" tabindex="-1" role="dialog" aria-labelledby="board-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h1>글쓰기</h1><br>
<label for="login-id">제목</label>
<input class="form-control" type="text" id="title" name="title" placeholder="제목" required="required">
<br/>
<label for="login-pw">내용</label>
<textarea class="form-control" name="editor" id="editor" rows="15" cols="80"></textarea>
<script> CKEDITOR.replace( 'editor' );</script>
<br/>
<input type="hidden" id="adminid" value="${id}" >
<button type="button" id="create" name="create" class="btn btn-default">제출</button>
</div>
</div>
</div>
</div>
정상적으로 작동하면 이제 homeCotroller에서 받아봅시다.
HttpServletRequest 에 getParameter 를 이용하여 값을 가져와서 사용하시면 됩니다.
참 쉽죠?
또한
Ajax 통신이 완료되면 리턴값은 String이나 int로 받게 되는데
위에는 home이라는 String을 넘겨 받습니다.
그 외에 객체를 리턴받기 위해서는 @ResponseBody 를 사용하여 리턴값을 받아주어야합니다.
예를 들어
public @ResponseBody Map<Stirng, Object> getJsonByMap() 이라는 함수를 만들어
return 값을 Map 형태로 넘겨주어도 됩니다.
또는 생성된 객체를 이용하여 리턴값을 주어도 됩니다.
추가적으로
Jackson 라이브러리를 사용하면 API를 만들때 편하기도 합니다.
[Spring/AJAX] AJAX (에이작스) 를 이용하여 데이터 전송하기
포스팅은 마치겠습니다
궁금하신점 댓글작성해주세요~
여러분의 공감 + a가 포스팅을 이어나가는 큰 힘이됩니다.
