본문 바로가기

 

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가 포스팅을 이어나가는 큰 힘이됩니다.

 

엉망진창

개인 블로그 입니다. 코딩, 맛집, 정부정책, 서비스, ~방법 등 다양한 정보를 소개합니다