스프링에서 ajax 사용의 유형들

저번 프로젝트를 진행하면서 , ajax를 일부로 많이 사용해봤는데 , 

 

역시 익숙하지 않은 방식이라 손에 겨우익은, 한가지 방식만을 사용해서 데이터를 주고 받았다. (그냥 map으로 넘기기)

 

프로젝트를 마무리하고 , 부족했던 부분이라고 생각했던 JS와 ajax를 더 공부하면서

 

여러가지 ajax의 데이터를 서버로 넘기는 유형들을 알게 되었고,

 

아 이렇게 사용했으면 훨씬 코드를 간결하고 , 개발자인 내가 정말 읽기도 , 사용하기도 편했겠구나.. 하고 느꼈다.

 

특히 success 부분을 사용해서, 프로젝트를 좀 더 이쁘게(?) 만들 수 있었을텐데... 라고 많이 생각이 났다.

 

---

일단 Ajax를 사용할때엔,

 

@RequestMapping 이아니라 

 

@ResponseBody 또는 @RestController를 이용했다.

 

 

@ReqeustMapping은 String type을 반환하며 ,

 

servlet-xml에서 설정했던 ViewResolver에서 prefix와 suffix가 return값에 추가되며 view로 이동된다.

 

 

@ResponseBody또는 @RestController는 view를 생성해주지 않고, Json 혹은Object형태로 데이터를 넘긴다.

 

 

1.기본형

 

Client ajax

$('#ajax-btn').on('click', function(){

let form={name : "coldwater" , age : 25} ;

	$ajax({
    url : "/ajax" ,
    type : "POST",
    data : form,
    success : function(data){
    $('.result').text(data); },
    error:function(request, status, error){
	alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    }
    
    });

});

data부분에 map 형태로 직접 넣어줘도 되겠다.

 

error 부분은 ajax의 에러로그를 볼 수 있도록 했다.

 

 

 

Controller

@ResponseBody
@ReqeustMapping(value="/ajax", method=ReqeustMethod.POST)
	public String ajaxObject(AjaxVO vo)throws Exception{
    logger.info("ajax로 받은 파라미터"+vo.getName()+vo.getAge());
    return vo.getName() + vo.getAge() ;
    }

간단하게 name과 age가 있는 VO로 받아봤다,

 

VO로 받지않고 map으로 받거나, 아예 RequestParam으로 값을 따로따로 받아올 수도 있겠다.

 

따로 객체에 값을 담아서 return 후, success 부분에서 매개변수로 받거나,

 

아니면 간단하게 바로 데이터를 보낸 후 , data로 받을 수도 있겠다.

 

항상 여러가지 방법을 알아두자, 떄에 따라 막힘없이 사용할 수 있도록.

 

 

 

View

<!--body의 한부분 -->

<button id="ajax-btn">에이잭스버튼</button>

<div class="result"></div>

버튼을 누르면 id값에 맞는 (#ajax-btn) ajax가 호출된다.

 

그리고, class값에 맞는 (.result) div의 success부분에

 

data로 받은 name과 age가 text로 출력이 되겠다.

 

만약 유효성검사에 적용한다면 success 부분에 text로 "성공"

 

error 부분에 text로 "실패"를 넣는다면

 

간단하고, 깔끔하게 비동기 유효성검사 결과를 받을 수 있을 것이다.

 

참 공부하고 나니 바보같았다고 느끼는 것이, 정작 유효성검사와 백단은 모두 구현하고서

 

이 간단한 ajax방식과 div id를 이용하는 화면단 출력을 할 줄 몰라서,

 

깔끔하지 못하게 비동기 방식으로 처리함에도 alert창을 출력하는 짓(?)을 해버렸다..ㅜㅜ

 

다음엔 그렇게 하지 말자.....

 

---

 

2.form 파라미터 넘기기

 

form의 파라미터를 넘기기 위해서, serialize() 함수를 사용한다.

 

이 형태는 데이터를 Object 형태로 넘긴다.

 

 

Client

$('#ajax-btn').on('click', function(){

	$ajax({
    url : "/seri" ,
    type : "POST",
    data : $(".serial").serialize(),
    success : function(data){
    $('.result').text(data); },
    error:function(request, status, error){
	alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    }
    
    });

});

 

 

Controller는 동일

 

 

View

<!--body의 한부분 -->

<form class="serial" >
<input type="text" name="name" value="name">
<input type="text" name="age" value="age">
<form>
<button id = "ajax-btn">serialize</button>

<div class="result"> </div>

 

사용자가 값을 입력할 수 있는 <input> 태그를 사용하기 위해선 form태그 안에 있어야 한다.

 

사용자가 입력한 값을 ajax에 사용하기 위해선 위와같이 form 태그의 id또는 class에 설정한 값을 사용해,

 

ajax에서 serialize() 함수를 이용해서 처리하면 되겠다.

 

비동기 댓글이나 방명록 등의 기능도에 사용 할 수 있겠다.

 

 

---

 

3. JSON.stringify()

 

해당 함수는 JSON 형태로 데이터를 보내고, 서버쪽에서도 JSON으로 데이터를 리턴해야 한다.

 

또 위의 두 부분과 다르게 RequestBody로 매개변수를 받아야 한다 ( JSON을 받기 위해)

 

 

Client

 

$('#ajax-btn').on('click', function() {

	let form = {name: "coldwater" , age: 25} ;

	$ajax({
    url : "/stringify",
    type:"POST",
    data: JSON.stringify(form),
    contentType: "application/json; charset=utf-8;",
    dataType : "json",
    success: function(data){
    let text = data.name + data.age;
    $('.result').text(text);
    },
    
    error: 위와 동일~
    
    });
});

 

먼저, data를 JSON.stringify로 보내주고,

 

contentType: application.json

 

dataType을 json으로 설정해준다.

 

 

 

Controller

@ResponseBody
@RequestMapping(value="/stringify", method=ReqeustMethod.POST)
	public Object stringify(@RequestBody AjaxVO vo) throws Exception{
    
    HashMap<String,Object> map = new HashMap<String,Obejct>();
   	map.put("name", vo.getName());
    map.put("age", vo.getAge());
    return map;
    
    }

 

이번엔 map 형태로 데이터를 보냈다.

 

서버단의 리턴타입에 따라, 리턴할때 보내야하는 데이터도 달라지는데,

 

이건 나중에 ajax를 사용할 때 다시 작성하도록 하겠다.

 

 

 

View

<button id = "ajax-btn"> ajajx</button>
<div class="result"> </div>

 

stringify 가 확실히 다른 방식보다 좀 더 복잡하고,

 

프로젝트를 하며 몇번 사용하려고 시도했지만 처음 사용할 때는 이해가 잘 되지않고,

 

사용하지 않아도 구현할 수 있던 상황이라 제대로 써보지 않았다.

 

하지만 몇몇 상황에선 분명 json 형태의 값을 서버단으로 보내야 하고

 

( 해당함수는 json 형태의 값을 String으로 서버단으로 전송해준다)

 

그땐 반드시 stringify를 사용해야한다.

 

그 상황에 해당 함수의 사용법을 모르면 꽤나 시간을 날리게 될테니, 사용법을 꼭! 기억해두자..

 

 

 

4. 파일

 

ajax로 댓글을 구현하서 , 댓글에도 첨부파일을 달 수 있도록 하는데에 꽤나 고생을 했다.

 

먼저 스프링에선 Multipart 로 파일업로드를 하는데, 

 

input태그에 enctype="multipart/form-data" 를 추가해줘야 multipart타입으로 데이터를 전송해서

 

서버단에서 파일의 값을 받을 수 있다.

 

 

이때 2번의 serialze() 함수만을 사용해서 form 태그 안의 파일값을 ajax로 받으면 오류가 발생한다.

 

enctype : 'multipart/form-data' 

 

를 ajax에 추가해주고

 

serialize() 가 아닌,

 

var insertData = new FormData($('#commentInsertForm')[0]);

 

FormData 라는 함수를 이용해서 , form 태그의 id값을 매개변수로 넣어주고 변수로 만들어서

 

ajax의 data값에 넣어주면 되겠다. 매개변수 뒤에 [0]도 잊지 말도록 하자.

 

그 외에는 서버단에서 Multipart라이브러리를 선언해주는 등, 기존의 파일 데이터를 받는 방법과 같다.

 

 	var insertData = new FormData($('#commentInsertForm')[0]);
    commentInsert(insertData); //Insert 함수호출(아래)

 

---

풀스택 개발자까진 바라지도 않는다.

 

프론트를 적절히 공부해서, 훌륭한 백엔드 개발자가 되고 싶다.